An iframe (inline frame) is an HTML element that allows you to embed another webpage, document, or media inside the current webpage.
It’s like placing a small browser window inside your page.

---

1. Basic Syntax

<iframe src="URL" width="500" height="300"></iframe>

• src → URL of the page to display inside the iframe.
• width & height → Size of the iframe in pixels (or %).

---

2. Key Attributes

Attribute	Purpose
src	Specifies the URL of the content to embed
width	Sets iframe width
height	Sets iframe height
name	Gives the iframe a name (useful for targeting links)
title	Accessibility description of iframe content
allowfullscreen	Allows video/content to go fullscreen
loading="lazy"	Loads iframe only when visible (faster page load)
sandbox	Restricts iframe permissions (for security)
allow	Specifies features iframe can use (e.g., camera, autoplay)
frameborder (deprecated)	Controls border display (use CSS instead)

---

3. Example – Embedding a Website

<iframe src="https://www.wikipedia.org" width="600" height="400" title="Wikipedia Homepage"></iframe>

This will display Wikipedia inside your page.

---

4. Example – Embedding a YouTube Video

<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>

---

5. Example – Targeting Links to an Iframe

<iframe name="contentFrame" width="500" height="300"></iframe>
<a href="page1.html" target="contentFrame">Load Page 1</a>
<a href="page2.html" target="contentFrame">Load Page 2</a>

Clicking the links will load pages inside the iframe.

---

6. Security Notes

• Iframes can be risky if they load untrusted content (cross-site scripting issues).
• Use sandbox and allow attributes to control permissions.

<iframe src="page.html" sandbox></iframe>

---

7. Styling an Iframe with CSS

iframe {
  border: 2px solid black;
  border-radius: 8px;
}

---