Cómo hacer un iframe de video responsive
Actualizado: 10 de noviembre de 2026
Un iframe con width="560" height="315" se ve bien en el ordenador, pero en el celular se sale de la pantalla o queda diminuto. La solución es que ocupe todo el ancho disponible y calcule su alto según la proporción del video.
La forma moderna: aspect-ratio
width:100% hace que ocupe el ancho de su contenedor y aspect-ratio calcula el alto. Funciona en todos los navegadores actuales. Para videos verticales, usa 9/16 y limita el ancho (por ejemplo max-width:360px).
<iframe src="https://dembed.cc/embed/v_TU_ID" title="Mi video" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>El truco clásico (para navegadores muy antiguos)
El 56,25 % es 9 ÷ 16: el contenedor reserva un alto proporcional a su ancho y el iframe lo llena. Para 4:3 usa 75 %; para 1:1, 100 %.
<div style="position:relative;padding-top:56.25%">
<iframe src="https://dembed.cc/embed/v_TU_ID" title="Mi video" style="position:absolute;inset:0;width:100%;height:100%;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>Sin escribir código
- 1Abre el generador de código embed y pega el enlace de tu video.
- 2Elige la proporción (16:9, 4:3, 1:1 o 9:16) y «Adaptable» como tamaño.
- 3Copia el código y pégalo en tu web.
Errores frecuentes
- Dejar width y height fijos en el iframe además del estilo: quítalos o el navegador puede ignorar el estilo.
- Un contenedor con ancho fijo en píxeles: el iframe se adapta a su contenedor, así que el contenedor también debe ser flexible.
- Olvidar allowfullscreen: el botón de pantalla completa no funcionará.
Preguntas frecuentes
Sí: pega el código en un bloque «HTML personalizado».