HTML <iframe>: Embed Another Page Inside a Page

The HTML <iframe> element embeds another HTML page or external resource inside the current page. Common uses include videos, maps, documents and selected web applications.

<iframe
    src="targetpg.html"
    title="Example embedded page"
    width="600"
    height="400"
    loading="lazy">
</iframe>

Modern iframe Attributes Top ↑

Obsolete iframe Attributes Top ↑

The earlier version of this tutorial used several presentation attributes that should not be used in modern HTML.

Responsive iframe Top ↑

A fixed-width iframe can overflow a narrow screen. One simple responsive pattern is to let the iframe use the available width and give it an aspect ratio.

<iframe
    src="targetpg.html"
    title="Example embedded page"
    style="width:100%; aspect-ratio:16/9; border:0;"
    loading="lazy">
</iframe>

For reusable layouts, move the style rules into a stylesheet instead of repeating inline styles.

Embed a YouTube Video Top ↑

The original Plus2net page uses this YouTube video URL. Here is the same embed modernized by removing the obsolete frameborder attribute and adding responsive sizing.

<iframe
    src="https://www.youtube.com/embed/e4ZJwowtIFo?si=3dYRClPanO_veIz9"
    title="YouTube video player"
    style="width:100%; aspect-ratio:16/9; border:0;"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy">
</iframe>

Embed Google Maps Top ↑

Google Maps can provide iframe embed code for a location. The original Plus2net example shows Mumbai.

<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.67337813933!2d72.71603275896192!3d19.082501695895846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1694417704855!5m2!1sen!2sin"
    title="Map showing Mumbai, Maharashtra"
    style="width:100%; height:300px; border:0;"
    allowfullscreen
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
</iframe>

Lazy Loading Top ↑

For an iframe that begins below the visible portion of the page, loading="lazy" can delay loading until the browser determines that the iframe is near the viewport.

<iframe
    src="report.html"
    title="Embedded report"
    loading="lazy">
</iframe>

This can reduce unnecessary initial page work when embedded content is not immediately visible.

sandbox for Embedded Content Top ↑

The sandbox attribute applies restrictions to embedded content. With no tokens, it enables a broad set of restrictions:

<iframe
    src="external-content.html"
    title="Restricted embedded content"
    sandbox>
</iframe>

Specific capabilities can be added only when required:

<iframe
    src="trusted-app.html"
    title="Embedded application"
    sandbox="allow-forms allow-scripts">
</iframe>

allow and Permissions Top ↑

The allow attribute can control selected browser features available inside an iframe.

<iframe
    src="video.html"
    title="Embedded video"
    allow="fullscreen">
</iframe>

Video providers often supply a longer allow value for features their player can use. Keep only the permissions needed by the embed.

referrerpolicy Top ↑

referrerpolicy controls how much referrer information is sent when the iframe resource is requested.

<iframe
    src="https://example.com/widget"
    title="Example widget"
    referrerpolicy="no-referrer">
</iframe>

Use a policy that fits the embedded service and your application's privacy requirements.

Hidden iframe Top ↑

The original tutorial demonstrates the global hidden attribute:

<iframe
    name="myiframe"
    src="uploadck.php"
    width="300"
    height="300"
    hidden>
</iframe>

The iframe is not rendered normally while hidden is present.

Security and Cross-Origin Restrictions Top ↑

An iframe creates a separate browsing context. When an iframe loads content from another origin, browser security rules normally prevent the parent page from directly reading or modifying the embedded document's DOM.

• Embed only content you intend to display.
• Use sandbox when you need to restrict embedded content.
• Grant iframe permissions through allow only when required.
• Use HTTPS for both the parent page and embedded resources when possible.
• Do not assume an iframe can embed every website. A remote site can send security policies that prevent framing.
• Do not trust data merely because it came from an embedded page.

Common iframe Mistakes Top ↑

Using frameborder Top ↑

frameborder is obsolete. Use CSS, for example border:0;.

Using scrolling, hspace or vspace Top ↑

These old iframe presentation attributes should not be used in modern HTML. Use CSS and normal browser scrolling behavior.

Omitting the title Top ↑

Give the iframe a useful title describing its embedded content.

Using only fixed dimensions Top ↑

Fixed widths can overflow mobile screens. Use responsive CSS where appropriate.

Loading every below-the-fold iframe immediately Top ↑

Consider loading="lazy" for iframe content that is not initially visible.

Giving an iframe unnecessary permissions Top ↑

Use the smallest set of allow or sandbox permissions that meets the embed's requirements.

Assuming every site can be embedded Top ↑

Remote sites can prevent framing through browser-enforced security policies.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: