Learn HTML & CSSIncrustación e iframes
A veces lo que quieres poner en tu página ya existe en otro lugar: un video en YouTube, una ubicación en un mapa, un formulario de pago gestionado por otra empresa. En vez de reconstruirlo, puedes colocar esa página completa dentro de la tuya. El elemento que hace esto es el <iframe>, y viene con un conjunto de controles para mantener el contenido prestado con el tamaño correcto, accesible y seguro.
El elemento iframe
Un iframe coloca otra página web dentro de la tuya. El nombre es la forma corta de "inline frame" (marco en línea), y esa es una buena imagen mental: una pequeña ventana enmarcada en tu página, a través de la cual se ve una página completamente separada. Un video de YouTube en una publicación de blog casi siempre es un iframe.
Lo apuntas hacia la página que quieres 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 sola 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 toda una habitación distinta.
<iframe> muestra toda una página web distinta dentro de la tuya, como una pequeña ventana que da a otra habitación. Lo apuntas a algún lugar con src, igual que haces con una imagen. ¿Ese reproductor de YouTube en un blog? Casi siempre es uno de estos. Incrustar videos, mapas y widgets
La buena noticia: casi nunca escribes código de incrustación a mano. El sitio desde el que estás incrustando lo escribe por ti. En YouTube haces clic en Compartir, luego en Insertar, y te entrega un <iframe> ya armado para copiar. Los mapas, reproductores de música y calendarios funcionan igual. Copias su bloque y lo pegas en tu HTML.
<iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" width="560" height="315"></iframe>width y height definen el tamaño del marco, medido en píxeles. Cambia esos dos números y el video se agranda o se achica en tu página.
<iframe> para pegar. Cambia width y height para redimensionarlo. Eso es la mayor parte del trabajo. Sandboxing y permisos
Como un marco ejecuta toda otra página, quizás quieras limitar lo que esa página tiene permitido hacer. El atributo sandbox hace exactamente eso: pone al marco detrás de una cerca de seguridad.
<iframe src="widget.html" sandbox></iframe>Con sandbox solo, sin más valores, la página enmarcada queda sujeta a la configuración más estricta: no puede ejecutar sus propios scripts, enviar formularios ni abrir ventanas nuevas. Luego le devuelves permisos específicos uno a la vez, solo los que la incrustación realmente necesita. Piénsalo como prestarle a alguien una habitación pero dejar con llave los armarios que no quieres que abra.
sandbox a un marco y bloquea la página incrustada: sin scripts, sin ventanas emergentes, sin travesuras. Luego le devuelves solo los permisos que realmente necesita. Es como prestar una habitación pero dejar algunos armarios con llave. Precauciones de seguridad y rendimiento
Las incrustaciones son útiles, pero cada marco carga toda una página adicional, así que una pila de ellas puede hacer que la tuya se sienta lenta. Dos hábitos te mantienen fuera de problemas: incrusta solo desde sitios en los que confíes, ya que estás invitando su página a la tuya, y no agregues más marcos de los que necesitas.
El atributo loading="lazy" de antes también ayuda aquí, reteniendo los marcos hasta que el lector se desplaza hacia ellos. Recurre a una incrustación cuando te ahorre trabajo real, como un video o un mapa, y evítala cuando un simple enlace haría el mismo trabajo.
loading="lazy". Si un simple enlace haría el mismo trabajo, usa el enlace.