HTML Iframe
What is an <iframe>?
The <iframe> (short for inline frame) is an HTML element used to embed another HTML document (like a webpage, video, or map) inside the current page.
Syntax
<iframe src="url" width="width" height="height"></iframe>- src: URL of the page or content to embed
- width / height: Set the size of the iframe
- Optional attributes can control behavior and appearance
Common Attributes
| Attribute | Description |
|---|---|
| src | URL of the embedded content |
| width | Width of the iframe (in px or %) |
| height | Height of the iframe |
| title | Improves accessibility |
| frameborder | (Deprecated) Controls border visibility |
| allowfullscreen | Allows full-screen mode for embedded videos |
| loading | Controls lazy loading ("lazy" or "eager") |
| sandbox | Adds restrictions to the embedded content |
Use Cases
- Embedding a YouTube video
- Showing a Google Map
- Displaying external web pages
- Embedding tools or forms from other domains
Best Practices
- Always provide a meaningful title for accessibility
- Use sandbox to add security if embedding third-party content
- Avoid excessive use of iframes to prevent performance issues
- Set responsive styles using CSS if embedding in mobile layouts