Iframe in HTML

The <iframe> (inline frame) element embeds another HTML page inside the current page. It creates a nested browsing context - a separate window within your page. Common uses: embedding YouTube videos, Google Maps, social media posts, or other third-party content.

Basic Usage

<iframe src="https://example.com" width="600" height="400"></iframe>

The src attribute specifies the URL of the page to embed.

Minimal attributes:

<iframe src="page.html" title="Embedded content"></iframe>

The title attribute is important for accessibility - it tells screen reader users what the iframe contains.

Common examples

<!-- YouTube video -->
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video"
allowfullscreen>
</iframe>

<!-- Google Maps location -->
<iframe
width="600" height="450"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1d3..."
title="Map of location"
allowfullscreen>
</iframe>

<!-- Twitter/X post -->
<iframe
src="https://platform.twitter.com/widgets/tweet_button.html"
title="Twitter share button">
</iframe>

srcdoc Attribute

The srcdoc attribute contains inline HTML to render inside the iframe, instead of loading from a URL:

<iframe
srcdoc="<h1>Hello from inside the iframe!</h1><p>This content is inline.</p>"
width="400" height="200"
title="Inline content example">
</iframe>

If both srcdoc and src are present, srcdoc takes precedence (and src is used as a fallback for older browsers).

sandbox Attribute

The sandbox attribute applies security restrictions to the iframe content. With no value, all restrictions are applied:

<iframe src="untrusted-page.html" sandbox title="Restricted iframe"></iframe>

Restrictions applied (all enabled by default with empty sandbox):

• Forms cannot be submitted
• Scripts cannot run
• Plugins are blocked
• Navigation of the parent page is blocked
• Popups are blocked
• Same-origin access is blocked

Enabling specific features

Pass space-separated values to selectively allow features:

<!-- Allow scripts and forms -->
<iframe
src="page.html"
sandbox="allow-scripts allow-forms"
title="Sandboxed page">
</iframe>

Security best practice: Use sandbox when embedding untrusted content. Start with all restrictions and allow only what is necessary.

allow Attribute

The allow attribute specifies permissions policies for the iframe - what browser features the embedded content can access:

<iframe
src="https://example.com/camera-app"
allow="camera; microphone; geolocation"
title="Camera demo">
</iframe>

Common permission values:

Referrer Policy

The referrerpolicy attribute controls what referrer information is sent when the iframe makes requests:

<iframe
src="https://other-site.com"
referrerpolicy="no-referrer"
title="External content">
</iframe>

Detailed Table with Tag, attributes and attribute values