17. La etiqueta <iframe>

Curso HTML5 desde cero — Freimel Jerez

La etiqueta <iframe> permite incrustar contenido externo dentro de una página web, como videos, mapas, documentos o incluso otros sitios web.

🎯 ¿Para qué sirve un iframe?

• Insertar videos de YouTube
• Mostrar mapas de Google Maps
• Integrar formularios externos
• Incrustar dashboards o vistas externas

📌 Sintaxis básica

<iframe 
  src="https://example.com"
  width="100%"
  height="400"
  loading="lazy">
</iframe>

🎥 Ejemplo con YouTube

<iframe
  src="https://www.youtube.com/embed/ID_DEL_VIDEO"
  title="Video incrustado"
  allowfullscreen>
</iframe>

🗺️ Ejemplo con Google Maps

<iframe
  src="https://www.google.com/maps/embed?...">
</iframe>

⚠️ Buenas prácticas

• Usa loading="lazy" para mejorar rendimiento
• Define siempre title (accesibilidad)
• No incrustes sitios no confiables
• Evita iframes innecesarios

🚫 Limitaciones

• Algunos sitios bloquean iframes por seguridad
• No tienes control total del contenido externo

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• <iframe> incrusta contenido externo
• Ideal para videos y mapas
• Usar con responsabilidad y buenas prácticas

En la siguiente lección aprenderás sobre el espacio de trabajo del desarrollador.