<iframe>: The IFRAME Element
Last updated: 2026-10-13
<iframe>The IFRAME Element
Embeds another web page or resource inline, a 'picture-in-picture', common for maps, video or widgets.
| Category | Scripts & Embedding |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </iframe> tag |
| Status | Standard |
📝 Syntax
<iframe src="https://example.com"></iframe>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
src | URL of the page to embed. | |
srcdoc | Inline HTML string as the embedded content (overrides src). | |
width | Width of the embedded area. | |
height | Height of the embedded area. | |
title | Accessible title describing the embed (required). | |
sandbox | Restricts embedded content permissions. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <iframe> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Always add title for accessibility; sandbox reduces security risk from embedded content.
❓ FAQ
QWill iframe content hurt SEO?
AContent inside an iframe belongs to the src document, not the parent page — search engines crawl and rank the iframe's own document. Light embedding (maps, video) is harmless; putting core content in an iframe removes it from the parent page's ranking contribution. Never load main content via iframe.
QWhat does the sandbox attribute on iframe do?
A
sandbox locks down embedded content: by default scripts, forms, and same-origin access are all disabled, and whitelist values re-enable items one by one, e.g. sandbox='allow-scripts allow-same-origin'. Always sandbox third-party embeds — minimize the risk.QHow do I make a responsive 16:9 iframe video?
AThe classic wrapper:
div { position: relative; padding-top: 56.25%; } with iframe { position: absolute; inset: 0; width: 100%; height: 100%; }. Modern browsers also accept aspect-ratio: 16/9 directly on the iframe.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
