Iframes in HTML
?? Iframes in HTML
The <iframe> element lets you embed another HTML page inside your current webpage, like a window to a different site or document.
Basic Syntax
<iframe src="https://example.com" width="600" height="400" title="Example Site"></iframe>Important Attributes
| Attribute | Description |
|---|---|
src | URL of the page to embed |
width | Width of the iframe (pixels or %) |
height | Height of the iframe |
title | Accessibility title describing iframe content |
frameborder | Border around iframe (usually 0 or 1) |
allowfullscreen | Allows fullscreen mode |
loading | Controls lazy loading (lazy, eager) |
Example: Embedding a YouTube Video
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen></iframe>Security & Usability Notes
Some sites prevent embedding using X-Frame-Options headers
Use
sandboxattribute for restrictions (e.g.,<iframe sandbox>)Always provide
titlefor accessibilityUse
loading="lazy"to improve page performance by deferring iframe load
Want me to show you how to sandbox an iframe or how to style iframes responsively?
