¿Qué es un iframe?

Un iframe (marco en línea) es un elemento HTML estándar, <iframe>, que carga un documento web independiente dentro de un área rectangular de la página actual. El reproductor de video de YouTube se entrega de esta forma: la página que lo rodea sigue siendo tuya, mientras que el área enmarcada ejecuta el propio código del reproductor de YouTube.

Por qué YouTube usa un iframe

Porque el reproductor se ejecuta en su propio marco, queda aislado del resto de la página por seguridad, recibe actualizaciones automáticas de YouTube sin que el sitio que lo inserta tenga que cambiar nada, y puede alternarse entre el dominio estándar youtube.com y el dominio respetuoso con la privacidad youtube-nocookie.com simplemente cambiando la URL de origen.

Atributos de iframe habituales para inserciones de video

Los más relevantes son src (la URL de inserción y sus parámetros), title (para lectores de pantalla), allow (qué permisos recibe el marco, como autoplay o pantalla completa), allowfullscreen, y loading=”lazy” para el rendimiento.

Cómo encaja un iframe en el resto de una página web

Una página web es normalmente un documento HTML continuo, pero un iframe crea una frontera: todo lo que hay dentro es un documento independiente, con sus propios scripts, estilos y contexto de navegación, renderizado dentro de una caja que posicionas con CSS normal. Este aislamiento es tanto una característica de seguridad como técnica. Una página que inserta un iframe de YouTube no puede leer ni modificar directamente lo que ocurre dentro del reproductor de YouTube, y el reproductor no puede leer ni modificar directamente el resto de tu página, más allá de lo que cada parte permite explícitamente mediante las API del navegador.

Un ejemplo práctico

La diferencia entre un iframe y simplemente enlazar a una página se ve de inmediato si se comparan ambos lado a lado. Un enlace, <a href="https://youtube.com/watch?v=ID">Ver en YouTube</a>, lleva al visitante completamente fuera de tu página. Un iframe, <iframe src="https://www.youtube-nocookie.com/embed/ID"></iframe>, mantiene al visitante en tu página mientras muestra el reproductor de YouTube dentro de un área definida. El atributo src cumple funciones muy distintas en cada caso: destino de navegación frente a fuente de un documento insertado.

Iframe frente a otras técnicas de inserción

Los iframes no son la única forma de traer contenido externo, pero son el enfoque estándar para una aplicación de terceros totalmente interactiva como un reproductor de video. Alternativas como insertar una imagen estática o una tarjeta de vista previa de enlace muestran mucho menos: no ofrecen controles de reproducción, no pueden transmitir datos de video y no responden a la interacción del usuario como lo hace un reproductor basado en iframe. Para cualquier cosa que requiera interactividad real desde otro origen, reproductores de video, mapas, widgets de pago, un iframe (o las API más especializadas construidas sobre él) suele ser la única opción práctica. Consulta código de inserción para ver cómo se empaqueta un iframe en el HTML que realmente pegas en una página.

Preguntas frecuentes