# Iframe (contenido responsivo)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/iframe.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Embeds

Integra videos, mapas, presentaciones y vistas externas conservando su proporción, sin alturas fijas ni desbordes en pantallas pequeñas.

v2.0

16:9

## 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`.

i

## Uso recomendado
Aplica `.iframe` al contenedor, no al elemento embebido. Agrega una clase `.ratio-*` sólo cuando necesites cambiar el 16:9 predeterminado.

✶

## Sin JavaScript
El comportamiento depende de CSS nativo y conserva un fallback para navegadores sin soporte de `aspect-ratio`.

Código + resultado

## Ejemplos reales de iframe

Selecciona una proporción para comparar el marcado y el resultado aplicado al mismo contenido.

HTML

Resultado aplicado  16:9

Embed responsivo

▶
Contenido embebido

'>

.iframe usa 16:9 por defecto; ratio-16-9 puede declararse de forma explícita cuando mejora la lectura del componente.

```html
<div class="iframe ratio-16-9">
  <iframe src="https://ejemplo.com/embed" title="Descripción del contenido" loading="lazy" allowfullscreen></iframe>
</div>
```

.ratio-4-3 reemplaza la proporción base y resulta útil para presentaciones o contenido clásico.

```html
<div class="iframe ratio-4-3">
  <iframe src="https://ejemplo.com/presentacion" title="Presentación" loading="lazy"></iframe>
</div>
```

.ratio-1-1 crea un embed cuadrado y limita su ancho dentro de la vista previa.

```html
<div class="iframe ratio-1-1">
  <iframe src="https://ejemplo.com/mapa" title="Mapa de ubicación" loading="lazy"></iframe>
</div>
```

.ratio-9-16 está pensado para video vertical; conviene limitar el ancho del wrapper en layouts amplios.

```html
<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`.

16:9

`.ratio-16-9`
Video y contenido panorámico

4:3

`.ratio-4-3`
Presentaciones y contenido clásico

1:1

`.ratio-1-1`
Contenido cuadrado

21:9

`.ratio-21-9`
Contenido cinematográfico ultrawide

3:2

`.ratio-3-2`
Fotografía y medios horizontales

9:16

`.ratio-9-16`
Reels, Shorts y video vertical

3:4

`.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. |

Regla del sistema  El elemento embebido debe ser hijo directo del wrapper para ocupar correctamente todo el espacio disponible.

Recomendaciones

## Buenas prácticas con iframes

01
### Título accesible
Incluye siempre un atributo `title` que describa con claridad el contenido embebido.

02
### Carga diferida
Usa `loading="lazy"` cuando el iframe no sea imprescindible en el primer viewport.

03
### Permisos mínimos
Limita `allow` y `sandbox` a las capacidades que el proveedor realmente necesita.

04
### Ancho vertical
Restringe el ancho de los ratios 9:16 y 3:4 para que no generen bloques excesivamente altos.