Docs ejecutables de HTML: Etiqueta iframe

Q: ¿Qué es un iframe en HTML?

Un (marco en línea) es una caja que muestra una página web aparte dentro de la actual. Tiene su propio documento, sus estilos y sus scripts, y por eso se usa para contenido insertado como vídeos, mapas, anuncios y vistas previas de código.

Q: ¿Por qué mi iframe dice que el sitio rechazó la conexión?

El sitio envía una cabecera X-Frame-Options o Content-Security-Policy: frame-ancestors que prohíbe que otros sitios lo muestren en un marco. Muchos sitios lo hacen para evitar el clickjacking. No puedes anularlo desde tu página; usa la URL oficial para insertar del sitio si la tiene.

Q: ¿Cómo quito el borde de un iframe?

Pon border: 0 en el CSS. El antiguo atributo frameborder="0" está obsoleto, aunque muchos códigos de inserción copiados todavía lo incluyen.

Q: ¿Cómo hago un iframe responsive?

Dale width: 100% y un aspect-ratio en el CSS, por ejemplo aspect-ratio: 16 / 9 para vídeo, y no pongas una altura fija. El iframe escala entonces con su contenedor y mantiene su forma.

Q: ¿Qué hace el atributo sandbox en un iframe?

Un atributo sandbox vacío bloquea los scripts, el envío de formularios, las ventanas emergentes y más dentro del marco, y trata su contenido como si viniera de un origen único. Después permites solo lo que necesita el contenido insertado con palabras clave como allow-scripts o allow-forms.

Cómo usar un iframe

Un <iframe> muestra otra página dentro de la tuya. Dale la dirección de la página en src, un title que la describa y un tamaño:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

El marco carga la página como un documento aparte, con sus propios estilos y scripts. Los ejemplos de esta página usan srcdoc en lugar de src, que pone el HTML del marco directamente en el atributo, así funcionan sin cargar otro sitio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

El párrafo exterior está en azul y en negrita; el párrafo dentro del marco no, aunque la misma regla p está en la página. Los estilos nunca cruzan el límite del marco, en ninguna de las dos direcciones. El borde por defecto y el tamaño por defecto de 300×150 los pone el navegador; los atributos width y height cambian el tamaño.

Insertar un vídeo de YouTube o un mapa

Los sitios de vídeo y los servicios de mapas te dan un código de iframe ya hecho. En YouTube, pulsa Compartir y luego Insertar:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

En Google Maps, abre el lugar, pulsa Compartir, luego Insertar un mapa, y copia el iframe del mismo modo. Conserva el title (los lectores de pantalla lo anuncian al entrar en el marco) y cambia los tamaños fijos por el CSS responsive de abajo. El atributo allow concede al marco funciones como la reproducción automática o la pantalla completa, que están desactivadas por defecto en las páginas insertadas.

Tamaño, borde e iframes responsive

Los códigos de inserción copiados usan tamaños fijos en píxeles, que se desbordan en los teléfonos. width: 100% más aspect-ratio hacen que el marco llene su contenedor y conserve su forma, y border: 0 quita el borde inset por defecto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Cambia max-width: 480px por otro valor y el marco mantiene su forma 16:9 en cualquier ancho. Quita border: 0 para ver el borde por defecto del navegador. Los antiguos atributos frameborder, scrolling y marginheight están obsoletos; usa CSS.

sandbox: limitar lo que puede hacer el marco

Un marco puede ejecutar scripts, enviar formularios y abrir ventanas emergentes como cualquier página. El atributo sandbox le quita esos poderes; un sandbox vacío lo bloquea casi todo, y cada palabra clave devuelve uno. Los dos marcos de abajo reciben el mismo HTML con un pequeño script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

El primer marco conserva su texto de relleno porque su script nunca se ejecuta (la consola de Chrome registra un mensaje "Blocked script execution" por ello). Usa sandbox siempre que muestres en un marco contenido del que no te fías del todo, como HTML escrito por usuarios, y añade solo las palabras clave que necesite:

Palabra clave	Permite
`allow-scripts`	Ejecutar JavaScript
`allow-forms`	Enviar formularios
`allow-popups`	`window.open` y los enlaces con `target="_blank"`
`allow-modals`	`alert()`, `confirm()` y `prompt()`
`allow-same-origin`	Tratar el contenido como su origen real (cookies, almacenamiento)
`allow-top-navigation`	Llevar toda la pestaña fuera de tu página

Nunca combines allow-scripts y allow-same-origin para contenido de tu propio origen: el script del marco podría entonces quitarse su propio sandbox.

Comunicarse con un marco: postMessage

La página exterior y el marco son documentos separados. Cuando sus orígenes son distintos no pueden tocar el DOM del otro, pero sí enviarse mensajes. Escribe un mensaje y envíalo al marco:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

En código real, pasa el origen exacto del marco (como 'https://maps.example.com') en lugar de '*', y comprueba e.origin en el receptor, para que los mensajes solo vayan y vengan del sitio que esperas.

Rendimiento y cuando un sitio se niega

Carga diferida. Añade loading="lazy" a los marcos que están muy abajo en la página; el navegador los carga solo cuando el lector se acerca a ellos al desplazarse. Cada iframe es la carga de una página completa, así que una página con muchos contenidos insertados se vuelve lenta sin esto.
"Rechazó la conexión". Muchos sitios (bancos, la mayoría de las redes sociales, la búsqueda de Google) envían una cabecera X-Frame-Options o frame-ancestors que prohíbe mostrarlos en un marco, y el navegador muestra un error dentro del marco. Tu página no puede anularlo. Usa la URL oficial para insertar del sitio, o un enlace.
Accesibilidad. Pon siempre title. Es como un lector de pantalla da nombre al marco, y una página con varios marcos sin título es difícil de recorrer.

Errores comunes

Falta el title. Los lectores de pantalla anuncian el marco sin nombre.
Anchos fijos del código de inserción copiado. Cámbialos por width: 100% y aspect-ratio.
Mostrar en un marco un archivo de vídeo normal. Para tu propio archivo .mp4, usa el elemento video; los iframes son para páginas.
Fiarse del contenido del marco. Añade sandbox a todo lo que no hayas escrito tú.
Esperar que el CSS exterior dé estilo al marco. Da estilo a la página del marco desde dentro de ella.

Preguntas frecuentes

¿Qué es un iframe en HTML?

Un <iframe> (marco en línea) es una caja que muestra una página web aparte dentro de la actual. Tiene su propio documento, sus estilos y sus scripts, y por eso se usa para contenido insertado como vídeos, mapas, anuncios y vistas previas de código.

¿Cómo inserto un vídeo de YouTube con un iframe?

En YouTube, elige Compartir, luego Insertar, y copia el código. Es un iframe cuyo src es https://www.youtube.com/embed/ más el id del vídeo. Conserva los atributos title y allowfullscreen, y usa en CSS aspect-ratio: 16 / 9 con width: 100% para hacerlo responsive.

¿Por qué mi iframe dice que el sitio rechazó la conexión?

El sitio envía una cabecera X-Frame-Options o Content-Security-Policy: frame-ancestors que prohíbe que otros sitios lo muestren en un marco. Muchos sitios lo hacen para evitar el clickjacking. No puedes anularlo desde tu página; usa la URL oficial para insertar del sitio si la tiene.

¿Cómo quito el borde de un iframe?

Pon border: 0 en el CSS. El antiguo atributo frameborder="0" está obsoleto, aunque muchos códigos de inserción copiados todavía lo incluyen.

¿Cómo hago un iframe responsive?

Dale width: 100% y un aspect-ratio en el CSS, por ejemplo aspect-ratio: 16 / 9 para vídeo, y no pongas una altura fija. El iframe escala entonces con su contenedor y mantiene su forma.

¿Qué hace el atributo sandbox en un iframe?

Un atributo sandbox vacío bloquea los scripts, el envío de formularios, las ventanas emergentes y más dentro del marco, y trata su contenido como si viniera de un origen único. Después permites solo lo que necesita el contenido insertado con palabras clave como allow-scripts o allow-forms.

Conceptos relacionados