HTML <iframe> Tag – Embedding External Content
📌 Introduction
The <iframe> tag is used to embed another webpage or content inside your page.
It stands for Inline Frame.
With <iframe>, you can display:
- YouTube videos
- Google Maps
- External websites
- Interactive tools
🧱 Syntax
<iframe src="URL"></iframe>
💡 Example (Simple Page)
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h1>Embedded Page</h1>
<iframe src="https://example.com" width="600" height="400"></iframe>
</body>
</html>
🖥️ Output Explanation
- A mini webpage appears inside your page
- The content is loaded from the
srcURL - It behaves like a “window” inside your website
🎯 Common Uses
1. YouTube Video
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
allowfullscreen
>
</iframe>
✔ Embeds a video directly in your page
2. Google Maps
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450">
</iframe>
✔ Shows a live map inside your website
⚙️ Important Attributes
1. src
Defines the page or content to embed.
2. width and height
<iframe src="page.html" width="500" height="300"></iframe>
✔ Controls size of embedded window
3. allowfullscreen
<iframe src="video.html" allowfullscreen></iframe>
✔ Allows full-screen mode (important for videos)
⚠️ Security Note
Some websites block being embedded using iframe.
✔ You may see:
- Blank frame
- Error message
- Blocked content
🚫 Common Mistakes
- Embedding non-allowed websites ❌
- Not setting width/height ❌
- Overusing iframes ❌ (bad for performance)
🎨 Styling Example
<iframe
src="page.html"
width="400"
height="300"
style="border:2px solid black;"
>
</iframe>
🧪 Mini Exercise
Create a page that includes:
- An embedded YouTube video
- An iframe showing another website
- Adjust size and style