HTML Iframes

HTML Tutorial: HTML Iframes

Learn how to embed external content in your webpage using HTML <iframe> with colorful examples

---

HTML <iframe> is used to embed another HTML page, video, or map inside your webpage. You can set width, height, and borders.

---

1️⃣ Basic Iframe Example

INPUT:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

OUTPUT:

✔️ Basic iframe embedding a webpage ✔️ Set width and height to control display

---

2️⃣ Iframe with Border and Rounded Corners

INPUT:

<iframe src="https://www.example.com" width="600" height="400" 
style="border:4px solid #0077cc; border-radius:12px;"></iframe>

OUTPUT:

✔️ Styled iframe with border and rounded corners ✔️ Makes embedded content visually appealing

---

3️⃣ Iframe for YouTube Video

INPUT:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

OUTPUT:

✔️ Embeds YouTube video ✔️ Can autoplay, fullscreen, or restrict controls

---

4️⃣ Iframe for Google Maps

INPUT:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">

</iframe>

OUTPUT:

✔️ Embed Google Maps locations ✔️ Useful for contact pages or location info

---

5️⃣ Best Practices for Iframes

• Always set width and height for proper display
• Use title attribute for accessibility
• Use loading="lazy" to improve page speed
• Style borders and corners for better visual integration
• Only embed trusted sources for security

---

🚀 What’s Next?

👉 HTML JavaScript

Next lesson will cover:

• Adding JavaScript to HTML pages
• Event handling and DOM manipulation
• Interactive webpage examples

---

HTML iframes allow embedding external content like websites, videos, and maps, making pages interactive and informative.