Cómo hacer responsive un vídeo de YouTube con una línea de código
Afortunadamente, desde hace años todos los navegadores web se auto-actualizan, al igual que los sistemas operativos móviles, por lo que la mayoría de usuarios ya utilizan navegadores modernos que soportan este tipo de códigos.
Internet Explorer únicamente representa ya el 0,5% de los usuarios de la web, por lo que seguir diseñando para IE es completamente contraproducente, obligando a añadir líneas de código que retrasan la carga en otros navegadores.
Una de las tareas a las que nos tenemos que someter los diseñadores y programadores era hacer responsive los vídeos de youtube embebidos en una web. Hasta hace poco se hacía aplicando una serie de apaños, que encontrarás en múltiples tutoriales por la web, que obligaban a meter una capa div a cada vídeo embebido.
La idea es bastante sencilla:
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>Aplicamos una capa superior en la que fijamos un padding de 56,25%, que es el resultado de dividir 9 por 16, para una proporción de 16/9, y hacemos que el iframe de dentro ocupe todo ese hueco.
.video-responsive {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px; /* Esta línea ofrece compatibilidad para IE6 y puede eliminarse */
position: relative;
}
.video-responsive iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}Versión moderna: aspect-ratio y selección inteligente
Existe, sin embargo, una forma mucho más elegante y rápida de conseguir que los vídeos de YouTube se muestren con formato responsive. Para ello, utilizamos una propiedad relativamente nueva y una forma de selección de etiquetas. El código en cuestión es este:
iframe[src*="youtube.com"] { max-width:100%; height:auto; aspect-ratio:16/9; }La propiedad clave, aspect-ratio, define la relación de aspecto del objeto en cuestión, en este caso 16/9. Comenzó a extenderse a mediados de 2021 y, actualmente, es compatible con el 91,24% de los navegadores.
Aspect-ratio es especialmente útil porque no necesita especificar el alto de un objeto, que lo saca automáticamente en función del ancho. Ayuda además a prevenir el Cumulative Layout Shift (CLS) de las páginas. Se puede utilizar en cualquier container de imágenes para evitar los CLS mientras las imágenes cargan.
Por último, no siempre es posible añadir un contenedor para especificar una clase. Gracias a este selector estaremos aplicando los estilos a todos los iframes que contengan un vídeo embebido de YouTube de una forma mucho más elegante. Lo mismo se puede hacer para incluir Vimeo y otros servicios.
En definitiva, hacer responsive los vídeos de YouTube era, hasta hace poco, una tarea un tanto engorrosa que tiraba de hacks para cambiar el tamaño del vídeo. Ahora, gracias a una única línea de código conseguimos el mismo efecto con una compatibilidad muy alta.
