Iframe responsive para YouTube

August 21, 2018

Guias  Desarrolladores 


Me encontré con un problema simple: Permitir que un video de YouTube en un iframe fuese responsive.

Después de intentar encontrar una solución sencilla a un problema simple, descubrí que no era tan simple como parecía en un principio, tal vez porque el CSS que había heredado era personalizado, copiado de otro sitio, y usaba una versión vieja de Bootstrap con cambios metidos a mano en el mismo .css.

Terminé haciendo una especie de hack que puede servirle a alguien más, o a mi futuro yo:

En el archivo CSS, usar:

.video-container {
    width: 100%;
    position: relative;
}

.video-container.format-16-9 {
    padding-top: 56.25%;
}

.video-container.format-4-3 {
    padding-top: 75%;
}

.video-container.format-3-2 {
    padding-top: 66.66%;
}

.video-container > .responsive-video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

Y la estructura del HTML queda:

<div class="video-container format-16-9">  
    <iframe class="responsive-video" src="https://www.youtube.com/watch?v=BmcMVdLYcgY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>  

¡A ser felices!