Contenidos · Embeds
Iframe (contenido responsivo)
Integra videos, mapas, presentaciones y vistas externas conservando su proporción, sin alturas fijas ni desbordes en pantallas pequeñas.
Proporción estable
.iframe utiliza 16:9 por defecto y admite siete utilidades de ratio.
Ancho responsivo
El wrapper ocupa el ancho disponible y calcula automáticamente la altura.
Múltiples formatos
Funciona con iframe, embed, video y object.
Código + resultado
Ejemplos reales de iframe
Selecciona una proporción para comparar el marcado y el resultado aplicado al mismo contenido.
<div class="iframe ratio-16-9">
<iframe src="https://ejemplo.com/embed" title="Descripción del contenido" loading="lazy" allowfullscreen></iframe>
</div>
<div class="iframe ratio-4-3">
<iframe src="https://ejemplo.com/presentacion" title="Presentación" loading="lazy"></iframe>
</div>
<div class="iframe ratio-1-1">
<iframe src="https://ejemplo.com/mapa" title="Mapa de ubicación" loading="lazy"></iframe>
</div>
<div class="iframe ratio-9-16">
<iframe src="https://ejemplo.com/video-vertical" title="Video vertical" loading="lazy" allowfullscreen></iframe>
</div>
Escala disponible
Siete proporciones
Las utilidades de ratio son compartidas con otros medios y reemplazan el 16:9 inicial de .iframe.
.ratio-16-9
Video y contenido panorámico
.ratio-4-3
Presentaciones y contenido clásico
.ratio-1-1
Contenido cuadrado
.ratio-21-9
Contenido cinematográfico ultrawide
.ratio-3-2
Fotografía y medios horizontales
.ratio-9-16
Reels, Shorts y video vertical
.ratio-3-4
Contenido vertical moderado
Referencia
Clases de iframe
Una clase estructural y siete modificadores cubren los formatos habituales de contenido embebido.
| Clase | Proporción | Función | Uso recomendado |
|---|---|---|---|
.iframe | 16:9 | Wrapper responsivo y recorte del contenido. | Aplicar siempre al contenedor exterior. |
.ratio-16-9 | 16:9 | Modifica aspect-ratio. | Video y contenido panorámico. |
.ratio-4-3 | 4:3 | Modifica aspect-ratio. | Presentaciones y contenido clásico. |
.ratio-1-1 | 1:1 | Modifica aspect-ratio. | Contenido cuadrado. |
.ratio-21-9 | 21:9 | Modifica aspect-ratio. | Contenido cinematográfico ultrawide. |
.ratio-3-2 | 3:2 | Modifica aspect-ratio. | Fotografía y medios horizontales. |
.ratio-9-16 | 9:16 | Modifica aspect-ratio. | Reels, Shorts y video vertical. |
.ratio-3-4 | 3:4 | Modifica aspect-ratio. | Contenido vertical moderado. |
Recomendaciones
Buenas prácticas con iframes
Título accesible
Incluye siempre un atributo title que describa con claridad el contenido embebido.
Carga diferida
Usa loading="lazy" cuando el iframe no sea imprescindible en el primer viewport.
Permisos mínimos
Limita allow y sandbox a las capacidades que el proveedor realmente necesita.
Ancho vertical
Restringe el ancho de los ratios 9:16 y 3:4 para que no generen bloques excesivamente altos.