Generador de iframe: crea código de inserción para cualquier URL
Generador de iframe
Generador de iframe: código de inserción adaptable con vista previa | We.Inc
Crea código iframe para cualquier URL: proporción adaptable o tamaño fijo, carga diferida, título, tokens de sandbox, allow y referrer policy, con vista previa en vivo.
Pega la dirección que quieres insertar, ponle un título al marco, elige una forma adaptable o un tamaño fijo, y este generador escribe la etiqueta iframe con carga diferida, tokens de sandbox, permisos y una política de referrer. La vista previa de abajo carga tu dirección para que confirmes que el sitio permite realmente mostrarse en un marco antes de pegar el código.
Qué escribe cada opción
Opción
Atributo o estilo
Valor por defecto en esta herramienta
Título
title="..."
Obligatorio, lo usan los lectores de pantalla
Forma adaptable
style="width:100%;aspect-ratio:16 / 9"
Tamaño fijo
width y height
El valor por defecto del navegador es 300 por 150
Carga diferida
loading="lazy"
Activada
Sandbox
sandbox="..."
Desactivado; marca tokens para restringir
Permisos
allow="fullscreen; ..."
solo fullscreen
Referrer
referrerpolicy="..."
A la mayoría de fragmentos de iframe que circulan por internet les falta al menos una de las cosas que necesita una inserción moderna: un título para las tecnologías de apoyo, carga diferida para no ralentizar la primera pantalla, un tamaño adaptable y el conjunto mínimo de permisos. Esta herramienta las escribe todas para cualquier dirección. Para vídeos, mapas y páginas de reservas de proveedores conocidos, nuestro generador de código de inserción también convierte sus enlaces para compartir en enlaces de inserción.
Pega la dirección https completa de la página que quieres insertar y escribe un título breve que diga qué es.
Elige Adaptable con una proporción, o Fijo con un ancho y un alto en píxeles.
Deja activada la carga diferida salvo que la inserción esté justo al principio de la página.
Marca tokens de sandbox si el contenido no es de plena confianza, y marca solo los permisos que necesita la inserción.
Pulsa Cargar vista previa para ver la inserción tal como la describe el código y luego copia el código.
Si la vista previa muestra un recuadro gris de conexión rechazada, el sitio prohíbe que lo muestren en un marco. Ningún atributo puede cambiarlo; consulta nuestra guía sobre ese error.
Usa la dirección de inserción propia del proveedor para vídeos y mapas. Sus direcciones de página normales suelen tener bloqueado el uso en marcos.
Mantén allow lo más reducido posible. Cada función que incluyas, como la cámara o la geolocalización, se ofrece al sitio insertado.
Coloca las inserciones pesadas por debajo de la primera pantalla para que la carga diferida pueda hacer su trabajo.
No marques a la vez allow-scripts y allow-same-origin para contenido de tu propio sitio; juntos anulan el sandbox.
Preguntas frecuentes
¿Cómo hago que un iframe sea adaptable?
Dale width: 100% y un aspect-ratio como 16 / 9, y deja la altura en automático. Así el navegador mantiene la forma en cualquier ancho. El antiguo truco del contenedor con padding-top ya no hace falta ahora que aspect-ratio tiene amplio soporte.
¿Qué hace loading="lazy" en un iframe?
Retrasa la carga hasta que el marco se acerca a la parte visible de la página. eager, que carga de inmediato, es el valor por defecto. La carga diferida ahorra datos y acelera la primera vista cuando los marcos están más abajo.
¿Por qué todo iframe debería tener un título?
Quienes usan lectores de pantalla se mueven entre marcos por sus títulos. Un título claro, como "Calendario de reservas del estudio de Leeds", les dice qué hay dentro antes de entrar.
¿Qué debo poner en el atributo allow?
Solo las funciones que necesita la inserción, separadas por punto y coma, por ejemplo allow="fullscreen; picture-in-picture". Indicar una función sin origen la permite para el origen de src. allow solo puede restringir lo que permite la propia cabecera Permissions-Policy de la página, nunca ampliarlo.
¿La vista previa envía mis datos a algún sitio?
No nos llega ningún dato. El código se genera en esta página. La vista previa es un iframe normal en tu navegador, así que el sitio insertado recibe una visita normal tuya, igual que cuando tus visitantes lo cargan.
Una lista de comprobación para cada inserción
Título, tamaño, carga, permisos, sandbox y referrer: seis decisiones, y el generador hace explícita cada una. Los valores por defecto aquí son los seguros: carga diferida, tamaño adaptable, una política de referrer que solo envía el origen entre sitios y ningún permiso extra aparte de fullscreen.
Después de pegar el código, pruébalo con el ancho de un móvil. Un marco con un ancho fijo en píxeles es la causa más común del desplazamiento horizontal en móviles.
Cuando la vista previa se queda en blanco o se rechaza
Un recuadro de error gris significa que el sitio insertado envió una cabecera que impide mostrarlo en marcos. Un marco blanco vacío suele significar que el sitio necesita scripts o formularios que bloquea un token de sandbox que marcaste: desmarca sandbox y vuelve a probar para distinguir un caso del otro.
Algunos sitios también detectan que están dentro de un marco y muestran otra página. Ese comportamiento lo deciden ellos y no se puede cambiar desde fuera.
Privacidad y rendimiento
Cada iframe es una página completa de otro sitio, con sus propios scripts y quizá sus propias cookies. Menciona el contenido de terceros insertado en tu aviso de privacidad y prefiere los modos de inserción respetuosos con la privacidad cuando el proveedor los ofrezca.
Si una inserción es grande y opcional, plantéate un marcador de clic para cargar: muestra una imagen y un botón, e inserta el iframe solo cuando alguien lo pida.
Patrones listos para usar
Marco adaptable con aspect-ratio
Cambia el tamaño de la ventana y el marco conserva su forma. Aquí la página interior viene de srcdoc para que el ejemplo funcione sin conexión.
Marcador de clic para cargar
No se carga nada del otro sitio hasta pulsar el botón. La etiqueta template contiene el iframe real.
Crea tu iframe
Dirección para insertar (https)
Título (describe el contenido)
Tamaño
Adaptable
Fijo
Proporción
Ancho (px)
Alto (px)
Carga diferida (loading="lazy")
Aplicar sandbox al contenido
Tokens de sandbox
Permisos (allow)
Política de referrer
Tu código
Copiar código
Cargar vista previa
La vista previa carga la dirección en tu navegador. Un recuadro de error gris significa que ese sitio no permite mostrarse en un marco.
Introduce una dirección completa que empiece por https:// o http://.