Un embed de YouTube con un ancho y alto fijos se ve bien en la pantalla donde lo construiste y se rompe en cualquier otra. Aquí está cómo hacer que se adapte correctamente en su lugar.
El problema del tamaño fijo
El código de embed predeterminado de YouTube establece un ancho y alto en píxeles literales, por ejemplo 560 por 315. En un monitor de escritorio grande eso puede verse pequeño; en la pantalla estrecha de un móvil puede desbordar la página por completo, obligando al visitante a desplazarse hacia los lados. Ninguna de las dos es una buena experiencia.
La técnica del padding bottom
La solución estándar envuelve el iframe en un contenedor cuyo tamaño se define con un padding bottom basado en porcentaje en lugar de una altura fija, y posiciona el iframe de forma absoluta para que llene ese contenedor:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>El 56.25% proviene de dividir 9 entre 16, la relación de aspecto estándar de un vídeo. Como el ancho del contenedor se establece al 100% de su elemento padre, y su altura se calcula como un porcentaje de ese ancho, la caja mantiene una forma 16:9 perfecta sin importar cuán ancha sea la página que la rodea.
La versión para Shorts
Los vídeos verticales, como los Shorts de YouTube, usan la relación opuesta. Cambia el padding bottom a 177.78% (16 dividido entre 9) y la misma técnica mantiene una forma 9:16 correcta en su lugar.
Una alternativa moderna más sencilla
El CSS actual soporta la propiedad aspect ratio directamente, que puede sustituir al truco del padding bottom en los navegadores que la soportan:
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Es más corta y fácil de leer, aunque el método del padding bottom sigue siendo la opción más segura por defecto si necesitas dar soporte a navegadores más antiguos.
Probarlo correctamente
Cambia el tamaño de la ventana de tu navegador, más estrecha y más ancha, mientras el embed está en pantalla (o usa el panel de dispositivos de tu navegador para simular un móvil) y confirma que el reproductor se adapta con fluidez, sin barras negras, sin desbordamiento y sin estiramientos. Es exactamente el tipo de comprobación que vale la pena hacer antes de publicar cualquier página con un vídeo insertado.
Evita el CSS manual
Nuestro generador de código de embed genera automáticamente un contenedor responsive con las proporciones correctas, incluida la versión 9:16 para Shorts, así que no necesitas recordar estos porcentajes por tu cuenta.