The iframe Element
An <iframe> embeds another HTML document inside the current page, rendered in its own independent browsing context. It’s commonly used for embedding maps, videos, and third-party widgets.
Basic IFrame
<iframe
src="https://www.example.com"
width="600"
height="400"
title="Example website"
></iframe>Common Attributes
| Attribute | Purpose |
|---|---|
| src | URL of the page to embed |
| title | Accessible name describing the embedded content |
| width / height | Dimensions of the iframe |
| loading | "lazy" defers loading until the iframe is near the viewport |
| allow | Grants permissions like camera, microphone, or fullscreen |
| sandbox | Restricts what the embedded page is allowed to do |
Embedding a Video
Iframes are the standard way to embed content from platforms like YouTube, since it lets the video run in its own isolated context without exposing your page’s code to it.
YouTube Embed Example
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
loading="lazy"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>The sandbox Attribute
sandbox applies a set of restrictions to the embedded content — for example, disabling scripts or form submission — as a security measure when embedding untrusted content.
Sandboxed IFrame
<iframe
src="untrusted-widget.html"
sandbox="allow-scripts"
title="Untrusted widget"
></iframe>Security Considerations
Never embed untrusted content without a sandbox attribute, since a malicious iframe could otherwise attempt to manipulate your page. Only embed sources you trust or have explicitly restricted.
Always Add a title
The title attribute is required for accessibility — it tells screen reader users what the embedded content is before they enter it.
Best Practice
Always set a descriptive title, use loading="lazy" for below-the-fold embeds, and apply the narrowest sandbox permissions necessary when embedding third-party content.