Generador de iframe
Convierte cualquier URL en código iframe limpio y accesible para insertar. Elige un tamaño fijo o una proporción de aspecto adaptable, da estilo al borde, define permisos allow y reglas sandbox, activa la carga diferida y comprueba el resultado en una vista previa en vivo.
Última actualización:
Origen
Tamaño
Apariencia y carga
Permisos (allow)
Sandbox
Todo está bloqueado salvo lo que permitas:
Avanzado: id, name, class
Código para insertar
Vista previa en vivo
¿En blanco o "rechazó la conexión"? El sitio prohíbe que se muestre en marcos (X-Frame-Options / CSP frame-ancestors). Usa en su lugar su enlace oficial de inserción.
Cómo usar Generador de iframe
- Pega una URL (o un fragmento <iframe> existente). Los enlaces a páginas de video y música se convierten automáticamente en sus URL de inserción.
- Añade un título que describa el contenido insertado, para que los usuarios de lectores de pantalla sepan qué contiene el marco.
- Elige el tamaño: un ancho y un alto fijos, o el modo adaptable con una proporción de aspecto que se ajusta al ancho de tu diseño.
- Define el comportamiento: borde y esquinas, carga diferida, pantalla completa, permisos allow y, para contenido no confiable, restricciones sandbox.
- Revisa la vista previa y luego copia el código en tu HTML, CMS o creador de páginas (usa un bloque HTML o de código personalizado).
Atributos de iframe explicados
| Atributo | Ejemplo | Qué hace |
|---|---|---|
src | https://…/embed | La página que se carga dentro del marco |
title | Mapa de ubicación de la tienda | Nombre accesible que anuncian los lectores de pantalla (exigido por WCAG para los marcos) |
width / height | 560 / 315 | Tamaño fijo en píxeles CSS; el ancho también puede ser un porcentaje |
style | aspect-ratio:16 / 9 | CSS para el borde, las esquinas y el tamaño adaptable |
allow | autoplay; encrypted-media | Política de permisos: qué funciones del navegador puede usar la página enmarcada |
allowfullscreen | (booleano) | Permite que el marco pase a pantalla completa, p. ej., el botón de pantalla completa de un reproductor de video |
sandbox | allow-scripts allow-forms | Aplica restricciones adicionales; cada token vuelve a habilitar una capacidad |
loading | lazy | Retrasa la carga hasta que el marco está cerca de la zona visible |
referrerpolicy | strict-origin-when-cross-origin | Cuánto de la URL de tu página se envía al sitio insertado |
frameborder, scrolling | (obsoleto) | Atributos antiguos de HTML4; usa en su lugar CSS border y el desbordamiento propio de la página insertada |
Iframe responsive: la fórmula
Un marco adaptable mantiene su forma cuando cambia su ancho. Con CSS moderno basta una propiedad: width:100%; aspect-ratio:16 / 9. La técnica antigua usa un contenedor cuyo padding-top es un porcentaje de su ancho:
padding-top = alto ÷ ancho × 100%, así que 16:9 = 9 ÷ 16 = 56.25%, 4:3 = 75%, 1:1 = 100%, 9:16 = 177.78% y 21:9 = 42.857%.
Después, el iframe se coloca con posición absoluta para llenar el contenedor. Ambos métodos dan el mismo resultado; aspect-ratio es compatible con todos los navegadores actuales.
Consejos sobre iframes
- Usa la URL oficial de inserción. Las URL normales de páginas de YouTube, Vimeo, Spotify y muchos otros se niegan a cargarse en un marco; sus URL /embed/ están hechas para ello. Este generador convierte automáticamente los enlaces habituales.
- Usa siempre https. Los navegadores bloquean los marcos http:// en páginas https://.
- Aplica sandbox al contenido no confiable. Si insertas HTML de usuarios o de terceros, empieza con un sandbox vacío y añade solo los tokens que necesite.
- Usa carga diferida en las inserciones bajo la parte visible. Los iframes son costosos; retrasarlos mejora la velocidad de la página y las Core Web Vitals.
Preguntas frecuentes
¿Qué es un iframe?
Un iframe (marco en línea) es un elemento HTML que inserta otra página web dentro de la página actual. Es la forma habitual de insertar videos, mapas, formularios, reproductores de música y widgets de otros sitios.
¿Cómo hago que un iframe sea responsive?
Pon el iframe con width:100% y dale una forma fija con la propiedad CSS aspect-ratio, por ejemplo aspect-ratio: 16 / 9. Para navegadores muy antiguos, envuélvelo en un contenedor con padding-top igual al alto dividido entre el ancho (56.25% para 16:9) y coloca el iframe con posición absoluta dentro. Esta herramienta puede generar cualquiera de las dos versiones.
¿Por qué la vista previa dice que el sitio rechazó la conexión?
Muchos sitios prohíben que otros sitios los muestren en un marco mediante el encabezado X-Frame-Options o la directiva frame-ancestors de Content-Security-Policy. Eso lo define el sitio insertado y no se puede cambiar desde tu página. Usa la URL oficial de inserción del sitio si la ofrece.
¿Qué hace el atributo sandbox?
Un atributo sandbox vacío aplica todas las restricciones: sin scripts, sin formularios, sin ventanas emergentes, y el contenido se trata como un origen único. Cada token, como allow-scripts o allow-forms, levanta una restricción. Evita combinar allow-scripts con allow-same-origin para contenido de tu propio origen, porque el marco podría quitarse su propio sandbox.
¿Qué es el atributo allow?
El atributo allow define una política de permisos para el marco: qué funciones avanzadas (autoplay, camera, microphone, geolocation, fullscreen, clipboard-write, encrypted-media y otras) puede usar la página insertada. Las funciones no indicadas se deniegan para marcos de origen cruzado.
¿Debo añadir loading="lazy" a los iframes?
Sí, para los iframes que quedan debajo de la parte visible. La carga diferida indica al navegador que retrase la carga del marco hasta que el usuario se desplace cerca de él, lo que acelera la carga inicial de la página. No la uses en una inserción situada al principio de la página.
¿Por qué mi iframe necesita un título?
Las pautas de accesibilidad (WCAG) exigen que los marcos tengan un título que describa su contenido. Los lectores de pantalla lo anuncian cuando los usuarios entran en el marco.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.