¿Qué es un iframe?

Un <iframe> (marco en línea) es un elemento HTML que incrusta otra página web o documento dentro de la página actual. Crea un contexto de navegación separado dentro de una región rectangular de la página, permitiendo que contenido de una URL diferente — como un mapa, video o widget de terceros — se muestre sin que el usuario tenga que navegar fuera de la página.

Los iframes se utilizan comúnmente para incrustar videos de YouTube, Google Maps, formularios de pago, widgets de redes sociales y banners publicitarios. Dado que el contenido incrustado se ejecuta en su propio contexto, atributos como sandbox y allow permiten a los desarrolladores controlar estrictamente qué puede hacer la página incrustada.

Descripción de la herramienta

Esta herramienta genera código HTML <iframe> listo para pegar a partir de un formulario simple. Configura la URL de origen, dimensiones, comportamiento del desplazamiento, estrategia de carga, permisos y restricciones de sandbox, y la herramienta genera instantáneamente la etiqueta correspondiente. No se requiere escritura manual de atributos ni memorización de la sintaxis de las banderas de sandbox.

Ejemplos

Iframe mínimo:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Iframe de carga diferida con sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe con permisos de cámara y micrófono:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Características

  • Genera código <iframe> válido a partir de un formulario visual — no se requieren conocimientos de HTML
  • Control total sobre permisos (allow) y restricciones de sandbox
  • Las actualizaciones de vista previa en vivo se producen al cambiar cualquier opción

Opciones explicadas

Opción Descripción
URL El atributo src — la dirección de la página a incrustar
Ancho / Alto Dimensiones en píxeles del iframe
Título Etiqueta accesible (atributo title) para lectores de pantalla
Nombre El atributo name, utilizado como destino de enlace
Desplazamiento Controla la barra de desplazamiento: automática, siempre activada o siempre desactivada
Carga eager carga inmediatamente; lazy difiere hasta que esté cerca de la ventana gráfica
Permitir pantalla completa Añade allowfullscreen para que el contenido incrustado pueda ir a pantalla completa
Borde Cuando está desactivado, añade style="border: none;" para eliminar el borde predeterminado
Permitir características Otorga permisos específicos de API del navegador a la página incrustada
Banderas de sandbox Restringe qué puede hacer la página incrustada; cada bandera reactiva una capacidad específica

Consejos

  • Siempre proporciona un atributo title para accesibilidad — los lectores de pantalla lo anuncian al enfocar el iframe.
  • Utiliza loading="lazy" para iframes debajo del pliegue para mejorar el rendimiento de carga de la página.
  • Añadir el atributo sandbox sin banderas bloquea completamente el contenido; añade solo las banderas que realmente necesites.