Una inserción de YouTube con ancho y alto fijos se ve bien en la pantalla donde la creaste, y queda mal en cualquier otra. Así es como se hace realmente responsiva.
La técnica del padding-bottom
La solución clásica coloca el iframe en un contenedor con un padding-bottom basado en porcentaje en lugar de una altura fija:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <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>n</div>La cifra 56,25 % proviene de dividir 9 entre 16, la proporción estándar del vídeo. Para vídeos verticales tipo Shorts, usa en su lugar 177,78 % (16 entre 9).
Una alternativa más moderna
El CSS actual también admite la propiedad aspect-ratio directamente, más breve en navegadores compatibles:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Compruébalo tú mismo
Estrecha y ensancha la ventana del navegador mientras la inserción es visible, y comprueba que el reproductor se adapta sin barras negras ni deformación.
Sin CSS manual
Nuestro generador de código de inserción crea automáticamente un contenedor responsivo con las proporciones correctas, incluida la versión 9:16 para Shorts.