Un iframe en HTML permite mostrar otro documento dentro de tu página. Se utiliza para insertar reproductores, mapas y otros contenidos que ofrecen un código de integración.
<iframe src="contenido.html" title="Vista previa del contenido"></iframe>La página de destino debe permitir que la incrusten. Que una dirección se abra en una pestaña no significa que se pueda mostrar dentro de un iframe.
Ejemplo de iframe responsive
Este ejemplo carga un documento de tu propio proyecto, llamado contenido.html:
<iframe class="marco" src="contenido.html"
title="Demostración del proyecto"
loading="lazy" width="960" height="540"></iframe>
<style>
.marco {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: 12px;
}
</style>El ancho se ajusta al contenedor y aspect-ratio mantiene la proporción. Para un formulario o una página larga, una proporción de vídeo puede no ser adecuada: ajusta la altura al tipo de contenido.
Los atributos más útiles de iframe
- src: dirección del documento que quieres insertar.
- title: nombre descriptivo que ayuda a identificar el marco con tecnologías de asistencia.
- width y height: dimensiones iniciales.
- loading=»lazy»: permite diferir la carga cuando el marco está lejos del área visible, según el navegador.
- allow: configura permisos concretos del contenido insertado.
- sandbox: restringe capacidades del documento integrado.
Describe el contenido en title: «Mapa de nuestra tienda en Madrid» es más útil que «iframe».
Cómo insertar un mapa o un vídeo de una plataforma
Utiliza la opción «Compartir» o «Insertar» del servicio y copia el código que proporciona. Después puedes añadir una clase para adaptar el tamaño, conservando la URL y los permisos necesarios.
Una URL de visualización no siempre equivale a una URL de integración. Por eso un enlace normal de vídeo puede fallar dentro del marco, mientras que el código de inserción oficial funciona.
Si el vídeo es un archivo que alojas tú, normalmente corresponde usar la etiqueta video, no un iframe.
Cómo usar sandbox sin romper el contenido
Un iframe con sandbox vacío aplica restricciones amplias. Este ejemplo es útil para una vista previa estática que no necesita ejecutar scripts:
<iframe src="vista-previa.html" title="Vista previa estática" sandbox></iframe>Los permisos adicionales se habilitan mediante valores específicos. No copies una lista de permisos completa por defecto. Conceder a contenido del mismo origen tanto allow-scripts como allow-same-origin puede debilitar el aislamiento; elige la configuración según el contenido real.
Por qué una página rechaza la conexión
El servidor de destino puede enviar X-Frame-Options o una política CSP con frame-ancestors para impedir la integración. Es una decisión del sitio que aloja el contenido. No se soluciona cambiando el CSS ni quitando el borde del marco.
También puede bloquearse una dirección HTTP desde una página HTTPS. Revisa la consola del navegador para distinguir estos casos de una ruta inexistente.
¿Puedo modificar el contenido del iframe?
El CSS de la página principal no se aplica automáticamente al documento insertado. Si controlas ambos documentos, añade los estilos en el documento correspondiente. Cuando los orígenes son distintos, la política del mismo origen restringe el acceso desde JavaScript; la comunicación requiere mecanismos apropiados, como postMessage, con validación del origen.
Preguntas frecuentes
¿Se puede insertar cualquier web?
No. Depende de sus políticas y de que ofrezca un método de integración.
¿Por qué aparece una barra de desplazamiento?
El contenido puede superar el espacio asignado. Ajusta las dimensiones sin ocultar información necesaria.
Antes de terminar, prueba el marco en móvil y con teclado. Para estructurar la página que lo contiene, vuelve a la ruta de HTML y repasa los niveles de encabezado.
Referencia técnica: documentación de iframe en MDN.
