≡En resumen
- Un iframe crea un contexto de navegación anidado: la página incrustada funciona como una ventana independiente dentro de la tuya.
- Se usa sobre todo para insertar contenido de terceros, como vídeos, mapas, formularios, reservas o pasarelas de pago.
- Los atributos imprescindibles son src (qué cargar) y title (qué es, para lectores de pantalla); loading="lazy" mejora la velocidad.
- La web incrustada puede impedir que la metan en un iframe con X-Frame-Options o con la directiva CSP frame-ancestors.
- Cada iframe consume memoria y peticiones de red, así que conviene usarlos con moderación y hacerlos responsive.
01 ¿Qué es un iframe en HTML?
Iframe es la abreviatura de inline frame («marco en línea»). Es una de las etiquetas HTML de contenido incrustado: reserva un rectángulo dentro de tu página y carga en él otro documento web, que puede estar en tu propio dominio o en uno ajeno.
La clave está en que ese documento no se mezcla con el tuyo. Tiene su propio HTML, sus propios estilos, sus propios scripts y su propio historial de navegación. Por eso se dice técnicamente que un iframe crea un contexto de navegación anidado: es como abrir una pequeña ventana del navegador dentro de tu página.
<iframe src="https://www.ejemplo.com/" title="Web de ejemplo" width="600" height="400"></iframe>
Con esa línea, el navegador reserva un hueco de 600 × 400 píxeles y carga dentro la página indicada en src. El atributo title describe el contenido para las personas que navegan con lector de pantalla.
02 ¿Para qué sirve un iframe? Usos habituales
El iframe resuelve un problema muy concreto: mostrar en tu web algo que vive en otro servidor y que su dueño quiere seguir controlando. En lugar de copiar código, el proveedor te da un fragmento listo para pegar. Este gesto de embeber contenido de terceros es hoy la forma más común de ver iframes.
Vídeos
YouTube, Vimeo y la mayoría de plataformas de vídeo ofrecen su reproductor como iframe desde el botón Compartir > Insertar.
Mapas
Google Maps y OpenStreetMap generan un iframe con el mapa de tu negocio para la página de contacto.
Formularios y reservas
Google Forms, Typeform, Calendly o los motores de reservas de hoteles y restaurantes se insertan como iframe.
Pagos
Muchas pasarelas cargan el formulario de tarjeta o la verificación 3-D Secure en un iframe aislado de la tienda.
Publicaciones sociales y widgets
Posts de redes sociales, reseñas, chats o reproductores de podcast suelen llegar como iframe o lo generan con JavaScript.
Demos y documentos
Editores de código en línea, presentaciones o visores de PDF muestran su contenido dentro de un marco.
03 Cómo insertar un iframe paso a paso
-
1
Consigue la URL o el código
En YouTube, Google Maps o tu herramienta de formularios, busca la opción Compartir > Insertar y copia el código que empieza por la etiqueta iframe.
-
2
Pégalo en el HTML
En WordPress usa un bloque HTML personalizado; en otras plataformas, el editor de código o el módulo de HTML libre.
-
3
Añade un title descriptivo
Por ejemplo «Mapa de la oficina en Alcoy» o «Vídeo: cómo funciona el producto». Muchos códigos de terceros no lo traen.
-
4
Activa la carga diferida
Si el iframe no aparece en la primera pantalla, añade loading="lazy" para que el navegador no lo descargue hasta que el usuario se acerque.
-
5
Hazlo adaptable
Sustituye el ancho fijo por un 100 % y controla la proporción con CSS (lo verás más abajo).
-
6
Comprueba que carga
Si el marco sale en blanco, abre la consola del navegador: puede que el sitio de origen prohíba ser incrustado.
<iframe src="https://www.youtube-nocookie.com/embed/ID_DEL_VIDEO" title="Vídeo: presentación del producto" loading="lazy" allow="fullscreen; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin"></iframe>
El dominio youtube-nocookie.com es el modo de privacidad mejorada de YouTube, que evita guardar información de quien visita la página hasta que reproduce el vídeo.
04 Atributos de la etiqueta iframe
| Atributo | Qué hace | Ejemplo de valor |
|---|---|---|
| src | URL de la página que se carga dentro del marco | https://www.ejemplo.com/ |
| srcdoc | HTML escrito directamente, sin URL externa; tiene prioridad sobre src | Un fragmento de HTML entre comillas |
| title | Nombre accesible del marco para lectores de pantalla | Mapa de nuestra oficina |
| width / height | Ancho y alto en píxeles CSS | 560 / 315 |
| loading | lazy aplaza la carga hasta que el marco se acerca a la pantalla; eager carga de inmediato | lazy |
| allow | Política de permisos: qué funciones puede usar el contenido incrustado | fullscreen; geolocation |
| sandbox | Aplica restricciones extra (scripts, formularios, ventanas emergentes…) que puedes relajar con tokens | allow-scripts allow-forms |
| referrerpolicy | Qué información de la página de origen se envía al servidor incrustado | strict-origin-when-cross-origin |
| name | Nombre del marco, útil como destino de enlaces y formularios | vista-previa |
05 Cómo hacer un iframe responsive y que no ralentice tu web
Un iframe con ancho fijo se sale de la pantalla en el móvil. La solución moderna es darle un ancho del 100 % y fijar su proporción con la propiedad CSS aspect-ratio, que funciona en todos los navegadores actuales: iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }. En código antiguo verás el truco del contenedor con padding-bottom: 56.25%, que hace lo mismo; si trabajas con plantillas heredadas, esta guía explica cómo hacer un iframe responsive con esa técnica.
El otro frente es el rendimiento. MDN recuerda que cada iframe consume memoria y recursos adicionales, y un reproductor de vídeo o un mapa arrastran decenas de peticiones. Aquí la velocidad de carga web se juega en los detalles.
~500 KB
ahorro aproximado al diferir un vídeo de YouTube incrustado
Fuente: web.dev (Google), It's time to lazy-load offscreen iframes
514 KB
ahorro al diferir un reproductor de Spotify incrustado
Fuente: web.dev (Google)
2-3 %
reducción mediana de datos descargados con iframes diferidos
Fuente: web.dev (Google)
- ✓Añade loading="lazy" a todo iframe que no esté en la primera pantalla.
- ✓Nunca apliques carga diferida al iframe principal de la parte superior de la página.
- ✓Declara width y height o aspect-ratio para evitar saltos de diseño (CLS).
- ✓Sustituye vídeos pesados por una imagen de portada que cargue el iframe al hacer clic (patrón «fachada»).
- ✓Limita el número de iframes por página y elimina los que nadie usa.
06 Seguridad: sandbox, clickjacking y webs que no se dejan incrustar
Por la política del mismo origen, el JavaScript de tu página no puede leer ni modificar el contenido de un iframe de otro dominio, y viceversa. Si ambos necesitan comunicarse (por ejemplo, un widget de pago que avisa de que la compra se ha completado), lo hacen mediante mensajes con window.postMessage().
Esa separación protege, pero no evita todos los riesgos. El más conocido es el clickjacking: una web maliciosa carga la tuya en un iframe invisible y engaña al usuario para que haga clic en botones que no ve. Por eso muchos sitios bloquean que otros los incrusten.
| Mecanismo | Quién lo configura | Para qué sirve |
|---|---|---|
| Atributo sandbox | La página que incrusta | Limita lo que puede hacer el contenido del marco: ejecutar scripts, enviar formularios, abrir ventanas o navegar la página superior |
| Atributo allow | La página que incrusta | Concede o niega funciones sensibles como cámara, micrófono, geolocalización o pantalla completa |
| Cabecera X-Frame-Options | La web incrustada | DENY impide cualquier incrustación; SAMEORIGIN solo la permite desde el mismo dominio |
| CSP frame-ancestors | La web incrustada | Sustituto moderno de X-Frame-Options: lista exacta de dominios que pueden incrustar la página |
07 Iframes, SEO y accesibilidad
Para Google, el contenido de un iframe pertenece a la URL de origen, no a tu página. Si incrustas un artículo de otra web, ese texto no cuenta como contenido tuyo. Google permite incluso que una página marcada como noindex se indexe cuando aparece incrustada, si añade la regla indexifembedded, lo que confirma que trata el marco como una pieza aparte. Lo importante de tu página debe estar en tu propio HTML.
En accesibilidad, el title es obligatorio en la práctica: las pautas WCAG exigen que cada marco tenga un nombre que explique su contenido. Es uno de los puntos que se revisan en cualquier auditoría de accesibilidad web, ahora que la normativa europea obliga a muchas empresas a cumplirla.
08 Origen del iframe y diferencias con frame, embed y object
A mediados de los noventa, las webs se dividían en frames: Netscape Navigator 2.0 introdujo en 1996 las etiquetas frameset y frame, que partían la ventana en varias zonas. Ese mismo año Microsoft presentó en Internet Explorer 3 el marco en línea, que se colocaba dentro del texto como si fuera una imagen. El W3C incorporó ambos a HTML 4.0 (recomendación de diciembre de 1997), y HTML5 eliminó después frameset y frame por sus problemas de usabilidad y SEO, mientras que iframe siguió evolucionando con atributos como sandbox o loading.
| Elemento | Qué incrusta | Estado actual | Cuándo usarlo |
|---|---|---|---|
| iframe | Una página HTML completa, propia o de terceros | Vigente | Vídeos, mapas, formularios y widgets externos |
| frame / frameset | Varias páginas que dividen toda la ventana | Eliminado en HTML5 | Nunca en proyectos nuevos |
| embed | Contenido externo gestionado por el navegador o un complemento | Vigente, uso residual | Casos puntuales, como algunos visores de PDF |
| object | Recurso externo con contenido alternativo si falla | Vigente, uso residual | Documentos o recursos con alternativa de texto |
| video / audio | Archivos multimedia alojados por ti | Vigente | Vídeo y audio propios, sin reproductor de terceros |
Preguntas frecuentes sobre Iframe
Es un elemento HTML que inserta una página web completa dentro de otra, en un marco con su propio documento y scripts. Se usa para incrustar vídeos, mapas, formularios o widgets de terceros.
Iframe significa inline frame, es decir, «marco en línea». Se llama así porque el marco se coloca dentro del flujo del texto, a diferencia de los antiguos frames que dividían toda la ventana.
Escribe la etiqueta iframe con el atributo src apuntando a la URL que quieres mostrar y un title descriptivo; añade width y height o aspect-ratio en CSS, y loading="lazy" si no está en la primera pantalla.
Lo más habitual es que la web de origen prohíba ser incrustada mediante la cabecera X-Frame-Options o la directiva CSP frame-ancestors. También ocurre al cargar una URL http dentro de una página https.
No penalizan por sí mismos, pero su contenido se atribuye a la URL de origen y no a tu página. Úsalos para complementos y deja el contenido que quieres posicionar en tu propio HTML.
Iframe carga un documento HTML completo en un contexto de navegación propio; embed incrusta un recurso externo que el navegador o un complemento gestiona. Para páginas y widgets web se usa iframe.
Sí, si incrustas fuentes de confianza y limitas permisos con los atributos sandbox y allow. Para proteger tu propia web del clickjacking, configura X-Frame-Options o CSP frame-ancestors.
Fuentes consultadas
Sobre el autor
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil y artículos → Ver perfil en LinkedIn ↗