Πώς να κάνει ανταποκρίνονται ή ρυθμιζόμενο, πλήρους πλάτους, ενσωματωμένα βίντεο από το Youtube

Si alguna vez has insertado ένα βίντεο του YouTube en alguna de tus ιστοσελίδες habrás notado que el vídeo guarda un ancho fijo y que éste no es responsivo cuando cambias el μέγεθος del navegador o cuando ves tus páginas webs desde otros συσκευές con distintos tamaños de pantalla (Κινητό, δισκία,…).

Ya en un artículo anterior vimos como podías insertar un vídeo de Youtube directamente en tu página web, και αν χρησιμοποιείτε WordPress, χωρίς κάθε είδους plugin.

Να το κάνουμε αυτό το Πλάτος του ένα βίντεο insertado, από τον κώδικα HTML ότι το Youtube μας da, είναι responsivo, το πρώτο πράγμα που θα κάνουμε είναι να τοποθετείτε τον κώδικα μέσα σε ένα DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

Μπορείτε να χρησιμοποιήσετε το Κωδικός φαίνεται εδώ, και αντικατάσταση το διαδρομή por la ruta que te dé YouTube το βίντεο που θέλετε να Εισαγωγή. Παρακαλείστε να σημειώσετε ότι πρέπει να αντιστοιχίσετε την τάξη βίντεο το στοιχείο το στοιχείο.

Στη συνέχεια, en tu archivo CSS που αντιστοιχεί, o directamente bajo un elemento STYLE en la misma página, Θα asignar los atributos de estilo para la clase κοντέινερ και βίντεο.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

Una vez introducido este código, Αν refrescas de nuevo la página donde hayas insertado el vídeo, comprobarás que ahora éste se ajusta να το Πλάτος από το DIV que lo contiene. Ναι ανατολικά DIV está situado directamente sobre el BODY, θα δείτε ότι αυτό reajusta να το ancho de la pantalla.