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