En muchas ocasiones, cuando insertamos o hacemos un ‘embed’ de un vídeo de Youtube, nos pone un tamaño fijo, algo que como ya sabréis no es muy recomendable, debido a que si este contenido se visualiza desde otros dispositivos, es bastante posible que no se vea correctamente. Por ejemplo, el problema más común es que accedemos un sitio web desde nuestro smartphone y el vídeo de Youtube que nos muestran no es responsive, por lo que el vídeo sale de forma gigante y desproporcionado en nuestra pantalla.

Esto genera una desagradable experiencia de usuario, por lo que al final se reflejará en el tráfico de nuestro sitio web.

Con un sencillo código CSS vamos a convertir nuestros vídeos de Youtube en Responsive.

Las reglas CSS son las siguientes:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Y nuestro código HTML el siguiente:

<div class="video-container">
    <iframe src="https://www.youtube.com/watch?v=G9POhCXEEDc" frameborder="0" width="560" height="315"></iframe>
</div>

Debemos añadir un div con la clase ‘video-container’ para que nos haga nuestro vídeo de Youtube de forma responsive. Aunque en el iframe le hayamos asignado un ancho y alto, el CSS se encargará de hacerlo totalmente adaptable a cualquier dispositivo.