Generador de Iframe
Genera códigos de incrustación iframe HTML fácilmente. Personaliza dimensiones, scroll, bordes y opciones responsive.
Un generador de iframe escribe la etiqueta HTML que incrusta una página web dentro de otra. Escribe la dirección en URL, ajusta Ancho y Altura con el selector px o % que hay junto a cada campo, y el panel Código HTML se reescribe con cada pulsación. Con los valores por defecto —100 % de ancho, 600 px de alto, barra de desplazamiento activada, sin borde, pantalla completa y carga diferida activadas— produce <iframe src="https://example.com" width="100%" height="600px" style="border: none;" allowfullscreen loading="lazy"></iframe>
Herramientas populares
Acerca de Generador de Iframe
Esta página construye un solo elemento HTML: una etiqueta <iframe>, sin div contenedor, sin hoja de estilos y sin script. Le das una URL y dos números, y cada casilla que tocas se refleja al instante en el panel Código HTML. El panel Vista Previa que hay al lado muestra la misma dirección con el mismo tamaño y el mismo borde, así que ves la incrustación antes de pegar la etiqueta en ningún sitio.
Cada control corresponde a una parte de la etiqueta. Ancho y Altura tienen su propio selector px o %, y los botones rápidos bajo la herramienta fijan 300x200, 560x315, 800x600 o el ancho completo con un clic. Barra de desplazamiento, al desmarcarse, añade scrolling="no". Borde, al marcarse, abre Tipo de borde (sólido, discontinuo, punteado, doble), Ancho de borde en un deslizador de 1 a 10 px y Color del borde como muestra más campo hexadecimal, y los escribe en un atributo style como style="border: 4px solid #FF6600;". Permitir pantalla completa añade allowfullscreen y Carga diferida añade loading="lazy".
Lo que deja fuera importa igual. La etiqueta no lleva atributo title, ni sandbox, ni allow, ni referrerpolicy, así que añade tú el title antes de publicarla: un marco sin él se anuncia como región sin nombre en los lectores de pantalla. Ten en cuenta además que scrolling figura en la lista de atributos obsoletos y no conformes del estándar HTML del WHATWG, de modo que un validador lo señalará aunque los navegadores sigan respetándolo.
El generador no puede hacer que un sitio acepte ser incrustado. Si el destino responde con X-Frame-Options: DENY o SAMEORIGIN, o con una directiva Content-Security-Policy frame-ancestors que excluye tu dominio, el navegador se niega a dibujar el marco diga lo que diga la etiqueta y la Vista Previa se queda en blanco. Nada de lo que escribes se envía a ningún sitio: la etiqueta se monta en tu navegador y la única petición es la que hace tu propio navegador para dibujar la vista previa.
Casos de uso
Cómo usar
Escribe o pega en el campo URL la dirección de la página que quieres incrustar; el panel Código HTML sigue vacío mientras no haya una.
Ajusta Ancho y Altura eligiendo px o % en el selector contiguo a cada número, o pulsa uno de los botones 300x200, 560x315, 800x600 y 100 % que hay bajo la herramienta.
Marca o desmarca Barra de desplazamiento, Permitir pantalla completa y Carga diferida: cada clic añade o quita un atributo en el código.
Activa Borde para desplegar Tipo de borde, Ancho de borde y Color del borde, y observa cómo aparece el atributo style en la etiqueta.
Revisa el panel Vista Previa: muestra la misma URL con el mismo tamaño y borde, así que un marco en blanco significa que ese sitio rechaza ser incrustado.
Pulsa el botón de copiar en la esquina superior derecha del panel Código HTML, pega la etiqueta en tu página y añade un atributo title para los lectores de pantalla.
Consejos Pro
- Deja Ancho en % y Altura en px. Esa pareja, el 100 % por 600 px por defecto, es la que hace que la incrustación se encoja con la columna que la contiene; si pasas Ancho a px el marco queda fijo y se saldrá en un móvil.
- Añade title="..." a la etiqueta después de copiarla. El generador no escribe ningún atributo title, y un iframe sin él se anuncia como marco sin nombre, la queja de accesibilidad más habitual en las incrustaciones.
- Desmarca Barra de desplazamiento solo si no queda otra: escribe scrolling="no", un atributo que el estándar HTML considera obsoleto. Controlar el desbordamiento con CSS dentro de la página incrustada es la forma conforme de hacerlo.
- Color del borde tiene una muestra y un campo hexadecimal juntos. Escribe #FF6600 en el campo de texto y cambian a la vez el borde de la Vista Previa y el atributo style del panel Código HTML, así puedes clavar un color de marca.
- Si la Vista Previa sigue en blanco y el código parece perfecto, deja de retocar la etiqueta: el sitio de destino rechaza ser enmarcado y ningún atributo de este generador anula su cabecera X-Frame-Options o Content-Security-Policy.
Solución de problemas
El panel Vista Previa está en blanco aunque la URL es correcta y el código parece bien.
El sitio que enmarcas lo rechaza mediante la cabecera X-Frame-Options: DENY o SAMEORIGIN o una directiva Content-Security-Policy frame-ancestors. Usa la URL de incrustación que el servicio publica para esto, o enlaza la página en lugar de enmarcarla.
El panel Código HTML no muestra nada y la Vista Previa dice «Ingrese URL para vista previa».
Todavía no se ha escrito ninguna dirección. La etiqueta solo se monta cuando el campo URL tiene un valor, y ese campo espera una dirección completa con el protocolo: escribe https:// delante del dominio en vez de empezar por www.
La incrustación se sale del borde de la página en el móvil.
Ancho está en px. Cambia a % el selector que hay junto a Ancho y pon el número en 100, la pareja por defecto; así el marco toma el ancho de su contenedor en lugar de un número fijo de píxeles.
Un validador de HTML dice que el atributo scrolling no está permitido.
Ocurre cuando Barra de desplazamiento está desmarcada, porque entonces se escribe scrolling="no". El estándar HTML del WHATWG incluye scrolling entre los atributos de iframe obsoletos y no conformes. Vuelve a marcarla y oculta el desbordamiento con CSS dentro de la página incrustada.
Preguntas frecuentes
Es un formulario que escribe por ti una etiqueta HTML <iframe>. Indicas la dirección de la página y el tamaño, marcas el comportamiento que quieres y monta los atributos en el orden correcto para que copies una sola línea en tu página. Todo lo que produce es HTML normal que podrías escribir a mano; la ventaja es acertar a la primera con las comillas, las unidades y los nombres de atributo.
Casi siempre porque el sitio se niega a ser enmarcado. Una cabecera de respuesta X-Frame-Options: DENY o SAMEORIGIN, o una Content-Security-Policy cuya directiva frame-ancestors no incluye tu dominio, le dice al navegador que deje el marco vacío. Lo decide el sitio que incrustas y ningún atributo de la etiqueta generada lo anula. Comprueba antes la Vista Previa aquí.
Deja Ancho en 100 con % seleccionado, que es el valor por defecto, para que el marco siga el ancho del contenedor donde lo pegues. La Altura se queda en px porque una altura en porcentaje necesita un padre con tamaño definido. Para una proporción fija, envuelve la etiqueta copiada en un div y dale aspect-ratio: 16 / 9 en tu propio CSS; el generador no crea contenedor.
Usa la dirección de incrustación del vídeo, la que va bajo youtube.com/embed/ y no el enlace watch?v=, y pulsa el botón 560x315 para el tamaño clásico del reproductor. Deja marcado Permitir pantalla completa para que funcione ese control, y Carga diferida para que el reproductor solo se cargue cuando el lector llegue hasta él.
Una publicación de LinkedIn solo se puede enmarcar con la dirección de incrustación que la propia LinkedIn ofrece en el menú de compartir de la publicación. Las URL normales de perfil y de feed de linkedin.com envían restricciones de enmarcado y se verán como un marco vacío, aquí y en tu web. Pega la URL en esta herramienta y mira la Vista Previa: si está en blanco, la página no se puede incrustar.
No. El elemento <iframe> forma parte del estándar HTML vigente. Lo que sí es obsoleto son varios de sus atributos antiguos, entre ellos scrolling, frameborder, marginwidth, marginheight y align, y por eso esta herramienta escribe los bordes en un atributo style y no con frameborder. Los tamaños, allowfullscreen y loading están en vigor.
Un marco es un contexto de navegación aparte: la página incrustada no puede leer el DOM ni las cookies de la tuya entre orígenes distintos, ni al revés. Los riesgos reales son ceder espacio de pantalla a un sitio que no controlas y que la página incrustada intente redirigir la ventana principal. El atributo sandbox limita eso; este generador no lo añade, escríbelo tú para contenido que no controles.
Para incrustar algo que se mantiene en otro sitio: un reproductor de vídeo, un mapa, un formulario de pago, un widget de reservas, la demo en vivo de un ejemplo de código o un panel de otra herramienta. La página incrustada conserva sus scripts, estilos y actualizaciones, así que obtienes el contenido sin copiarlo y sin que interfiera con tu CSS.
No. La etiqueta que escribe contiene solo src, width, height, un scrolling opcional, un atributo style, allowfullscreen y loading. Aquí no hay campo para sandbox, allow ni referrerpolicy. Añade a mano sandbox="allow-scripts allow-same-origin", o una lista más restrictiva, si vas a enmarcar contenido ajeno.
En cualquier lugar donde tu página acepte HTML en bruto: un bloque HTML personalizado de WordPress, un bloque de código de Shopify o Squarespace, un archivo .html estático o una plantilla de tu framework. Pégalo dentro del <body>, no del <head>. Si tu editor escapa los signos de menor y mayor, busca la vista de código en lugar de la de texto enriquecido.