Qué es Generador de iframe responsive?
El marcado de iframe responsivo evita que los embebidos se desborden, desplacen el diseño o carezcan de atributos de accesibilidad. Es útil para videos, mapas, demostraciones, diapositivas y widgets de documentación. Un buen embebido incluye un título, carga diferida cuando corresponde, una relación de aspecto estable y solo los permisos que necesita.
Respuesta rápida
Genere marcado de iframe responsivo con relación de aspecto, carga diferida, restricciones de sandbox y atributos de título. La salida incluye CSS y HTML para un embebido estable que evita desplazamientos de diseño.
Last updated: 2026-06-11
Limitaciones
- Las restricciones de sandbox pueden romper contenido que depende de scripts, formularios o almacenamiento del mismo origen.
- La propiedad CSS aspect-ratio es más nueva que el truco clásico de padding-bottom. Los navegadores antiguos pueden necesitar el fallback.
- La carga diferida (loading=lazy) puede retrasar la representación de embebidos sobre el pliegue.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Pegue la URL de origen del iframe y escriba un título claro.
- Elija la relación de aspecto y si la carga diferida debe estar habilitada.
- Active sandbox solo cuando la página embebida pueda funcionar con las restricciones seleccionadas.
- Copie el HTML y CSS en la página donde debe aparecer el embebido.
Para qué puedes usarla
- Insertar un video sin desbordamiento de ancho fijo.
- Agregar un iframe de demostración en vivo a la documentación.
- Crear un embebido de mapa con relación de aspecto estable y título.