Inserción de contenido e iframes
A veces, lo que quieres en tu página ya existe en otro lugar: un video en YouTube, una ubicación en un mapa, un formulario de pago ejecutado por otra empresa. En lugar de reconstruirlo, puedes colocar toda esa página dentro de la tuya. El elemento que hace esto es el <iframe>, y viene con un conjunto de controles para mantener el contenido prestado dimensionado, accesible y seguro.
El elemento iframe
Un iframe inserta otra página web dentro de la tuya. El nombre es una abreviatura de "inline frame" (marco en línea), y esa es una buena representación: una pequeña ventana enmarcada en tu página, con una página completamente separada visible a través de ella. Un video de YouTube en una publicación de blog es casi siempre un iframe.
Apuntas a la página que deseas mostrar con el atributo src, el mismo atributo que usa una imagen para su archivo:
<iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ"></iframe>Esa única etiqueta trae el reproductor de YouTube a tu página. Piénsalo como colgar una ventana en una pared: la pared es tu página, y a través de la ventana ves una sala completamente diferente.
<iframe> muestra toda otra página web dentro de la tuya, como una pequeña ventana que mira hacia otra sala. Apuntas a algún lugar con src, de la misma manera que lo hace una imagen. ¿Ese reproductor de YouTube en un blog? Casi siempre uno de estos. Inserción de videos, mapas y widgets
Las buenas noticias: casi nunca escribes código de inserción a mano. El sitio desde el que estás insertando lo escribe para ti. En YouTube haces clic en Compartir, luego en Insertar, y te da un <iframe> listo para copiar. Los mapas, reproductores de música y calendarios funcionan de la misma manera. Copias su bloque y lo pegas en tu HTML.
<iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" width="560" height="315"></iframe>Los atributos width y height establecen el tamaño del marco, medido en píxeles. Cambia esos dos números y el video se hace más grande o más pequeño en tu página.
<iframe> para pegar. Cambia width y height para redimensionarlo. Ese es la mayoría del trabajo. Aislamiento y permisos
Debido a que un marco ejecuta toda otra página, es posible que desees limitar lo que esa página puede hacer. El atributo sandbox hace exactamente eso: coloca el marco detrás de una cerca de seguridad.
<iframe src="widget.html" sandbox></iframe>Con sandbox por sí solo, la página enmarcada se mantiene en la configuración más estricta: no puede ejecutar sus propios scripts, enviar formularios o abrir nuevas ventanas. Luego le devuelves permisos específicos uno a la vez, solo los que el insertado realmente necesita. Piénsalo como prestar a alguien una sala pero cerrar los armarios que no quieres que se abran.
sandbox a un marco y bloquea la página incrustada: sin scripts, sin ventanas emergentes, sin travesuras. Luego devuelves solo los permisos que realmente necesita. Es como prestar una sala pero mantener algunos armarios cerrados. Advertencias de seguridad y rendimiento
Los insertados son convenientes, pero cada marco carga una página extra completa, así que una pila de ellos puede hacer que la tuya se sienta lenta. Dos hábitos te mantienen fuera de problemas: solo insertar desde sitios en los que confías, ya que estás invitando su página a la tuya, y no agregar más marcos de los que necesitas.
El atributo loading="lazy" de antes también ayuda aquí, reteniendo marcos hasta que el lector se desplace a ellos. Recurre a un insertado cuando ahorres trabajo real, como un video o un mapa, y omítelo cuando un enlace simple haría el mismo trabajo.
loading="lazy". Si un enlace simple haría el mismo trabajo, usa el enlace.