Hacer vídeos responsive de youtube

Posted by On diciembre 19, 2016 4 Comments

Hace unos días me vi en la tesitura de tener que poner un video de youtube en wordpress, algo realmente sencillo, pero ocurría que la red social no nos da la posibilidad de introducir los vídeos con responsive directamente, por ello voy a contaros como hacerlo usando solamente css y un div….

Para empezar lo primero que debemos de hacer es introducir el iframe que nos da youtube dentro de un div tal y como vemos aquí:

<div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/CBoG4QNDX5U" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

Después tenemos que crear el siguiente código css para hacer que el responsive funcione correctamente:

/*Videos responsive*/
.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
 
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Con esto simplemente podremos lograr hacer nuestros videos embebidos de youtube responsive.