HTML '<iframe>' Element
🔍 What is an <iframe>?
The <iframe> (short for inline frame) is an HTML element that allows you to embed another HTML page or external content (like videos, maps, or websites) inside the current page. Think of it as a "window" to another webpage 🌐.
>>“An <iframe> lets you nest the world inside your webpage.” 🌍
📌 Basic Syntax
Basic iframe usage
<iframe src="https://example.com" width="600" height="400"></iframe>This will embed https://example.com in a 600x400 box within your page.
📐 Key Attributes
| Attribute | Description |
|---|---|
| src | The URL of the page to embed |
| width | Specifies the width of the iframe |
| height | Specifies the height of the iframe |
| title | Describes the iframe content for accessibility |
| loading | Can be set to "lazy" to delay loading |
| allowfullscreen | Allows the iframe content to be shown in full-screen mode |
🌍 Example: Embedding Google Maps
Google Maps iframe
<iframe
src="https://www.google.com/maps/embed?pb=!1m18..."
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
title="My Google Map"
></iframe>
Note
💡 Use the title attribute to improve accessibility, especially for screen readers.
🔒 Security & Restrictions
- Some sites block embedding with X-Frame-Options headers (e.g., Facebook, Twitter).
- Be cautious of iframe injection attacks; never embed user-controlled URLs directly.
- You can use sandbox attribute to limit iframe capabilities.
Secure iframe with sandbox
<iframe src="..." sandbox></iframe>📌 Use Cases
- 📽️ Embedding YouTube videos
- 🗺️ Displaying interactive maps
- 📄 Embedding PDFs or other documents
- 💻 Showing content from another site inside your page
🔗 Learn More
>>“With <iframe>, your page becomes a window to the web.” 🪟