Cómo hacer responsivo o ajustable, al ancho completo, un vídeo embebido de Youtube

Si alguna vez has insertado un vídeo de Youtube en alguna de tus páginas webs habrás notado que el vídeo guarda un ancho fijo y que éste no es responsivo cuando cambias el tamaño del navegador o cuando ves tus páginas webs desde otros dispositivos con distintos tamaños de pantalla (móviles, tablets,…).

Ya en un artículo anterior vimos como podías insertar un vídeo de Youtube directamente en tu página web, y en el caso de que uses WordPress, sin necesidad de ningún tipo de plugin.

Para hacer que el ancho de un vídeo insertado, a partir del código HTML que Youtube nos dá, sea responsivo, lo primero que haremos será meter dicho código dentro de un 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>

Puedes usar el código aquí mostrado, y sustituir la ruta por la ruta que te dé Youtube del vídeo que quieras insertar. Ten en cuenta que debes asignar la clase video al elemento IFRAME.

A continuación, en tu archivo CSS correspondiente, o directamente bajo un elemento STYLE en la misma página, vamos a asignar los atributos de estilo para la clase contenedor y video.

.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, si refrescas de nuevo la página donde hayas insertado el vídeo, comprobarás que ahora éste se ajusta al ancho del DIV que lo contiene. Si este DIV está situado directamente sobre el BODY, verás que se reajusta al ancho de la pantalla.