HTML iframe Element

Subject: html

🪟 HTML <iframe> Element

The <iframe> (short for inline frame) is used to embed another HTML document or external resource such as a webpage, video, map, or PDF within your current page. It acts like a window showing content from another location.

🔧 Syntax

🚀 Try it in Compiler
  • src: URL of the content to display
  • width and height: Dimensions of the frame
  • title: Description for accessibility (required for screen readers)
  • loading: Set to lazy for performance optimization
  • allowfullscreen: Enables full-screen mode for media content
  • style: Internal CSS styling
  • frameborder: Deprecated (use CSS instead)

✅ Basic Iframe Example

🚀 Try it in Compiler

🎨 Styled Iframe with Internal CSS

🚀 Try it in Compiler

📺 Embedding a YouTube Video

🚀 Try it in Compiler

🗺️ Embedding a Google Map

🚀 Try it in Compiler

🛡️ Security and Performance Tips

  • Use sandbox attribute to restrict iframe actions:
🚀 Try it in Compiler
  • Use loading="lazy" to defer off-screen content loading
  • Avoid mixed content (HTTP inside HTTPS pages)
  • Don’t embed content from untrusted sources

📌 Common Use Cases

  • Embedding YouTube videos
  • Displaying Google Maps
  • Embedding PDFs or Slides
  • Loading another webpage

🧠 Key Takeaways

  • <iframe> embeds external or internal pages into the current HTML document
  • Always include title for accessibility
  • Use sandbox, loading, and CSS for control, performance, and design
  • Use responsibly to avoid performance issues or security risks
Next: HTML Forms