¿Qué es el diseño responsivo?

El diseño responsivo significa que el diseño de una página web se ajusta a la pantalla en la que se ve, desde un teléfono pequeño hasta un gran monitor de escritorio, en lugar de mantener un tamaño fijo. Aplicado al video, significa que el reproductor se escala con su contenedor en lugar de renderizarse siempre con un ancho y alto fijos en píxeles.

La técnica del padding-bottom

La forma más habitual de hacer responsiva una inserción es envolver el iframe en un contenedor con un padding-bottom basado en porcentaje (56,25% para video 16:9), y posicionar el iframe dentro de forma absoluta al 100% de ancho y alto. Esto mantiene correcta la relación de aspecto a cualquier ancho de contenedor.

Una alternativa más reciente

El CSS moderno también admite directamente la propiedad aspect-ratio, que logra un resultado similar con menos marcado en los navegadores que la admiten. Consulta la guía completa de inserciones responsivas para ver ejemplos funcionales de ambos enfoques.

Las dos técnicas principales para el video responsivo

El dimensionado responsivo de video se logra generalmente de dos maneras. La técnica más antigua, más compatible en general, envuelve el iframe en un contenedor usando un padding-bottom basado en porcentaje (56,25% para video 16:9) combinado con posicionamiento absoluto, un truco que ha funcionado de forma fiable desde que el diseño responsivo se volvió habitual hace más de una década. La técnica más reciente usa la propiedad CSS aspect-ratio directamente en el contenedor, más corta de escribir y más fácil de leer, a costa de depender de una característica CSS no admitida en algunos navegadores considerablemente más antiguos.

Un ejemplo práctico comparando ambas técnicas

<!-- Técnica padding-bottom -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- Técnica aspect-ratio -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Ambas producen el mismo resultado visual en navegadores modernos; la elección depende sobre todo de cuánta compatibilidad con navegadores antiguos necesite tu público.

Diseño responsivo frente a inserción de tamaño fijo

Una inserción de tamaño fijo, con atributos literales width y height, es más sencilla de escribir pero se rompe en el momento en que la página circundante se ve en una pantalla más estrecha que ese ancho fijo, ya sea desbordando el diseño o exigiendo desplazamiento horizontal. El diseño responsivo cambia una pequeña complejidad adicional de configuración por una inserción que funciona correctamente en toda la gama de tamaños de pantalla que los visitantes realmente usan, por lo que es la opción por defecto recomendada para prácticamente todos los sitios web modernos.

Probar en una gama real de anchos de dispositivo, no solo redimensionar ligeramente una ventana de navegador de escritorio, sigue siendo la forma más fiable de confirmar que una inserción responsiva realmente se comporta correctamente para toda la gama de visitantes que recibe un sitio web típico, desde teléfonos pequeños hasta grandes monitores externos.

Preguntas frecuentes