iframe in HTML: Embed Code Examples and Syntax

The <iframe> tag in HTML (inline frame) embeds another web page inside your page, such as a video, a map or a form. The embedded page runs in its own window, separate from your page. Here is a basic iframe example you can copy:

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

The src attribute sets the page to load, and title describes the frame for screen readers.

How to Use the HTML iFrame

Use the <iframe> tag to create an iFrame in HTML. At a minimum, you need to include a src attribute that defines the URL of the embedded content.

This element is fully supported in HTML5, and when combined with the correct sandbox, referrer, and permissions attributes, it offers safe integration of external services and widgets.

Basic Syntax

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

This snippet shows a basic iFrame embedded in HTML code and is often used in modern websites for layout and functionality.

Common Attributes of the HTML iFrame

• src: Defines the URL of the embedded content.
• width and height: Set the iFrame’s dimensions in pixels.
• title: Describes the frame’s content for screen readers.
• frameborder: Obsolete. Remove the border with CSS (border: none;) instead.
• allowfullscreen: Enables fullscreen mode for embedded videos.
• sandbox: Restricts the embedded content’s access to browser features for security.
• name: The name attribute used for targeting the frame via links or scripts.
• referrerpolicy: Controls how the referrer is sent when loading the content.
• allow: Defines permissions for things like fullscreen, camera, or microphone.

When to Use the HTML iFrame

Use iFrames when you want to embed external content while maintaining security and flexibility. This is common in dashboards, learning platforms, and embedded analytics tools where iFrames allow seamless integration of complex services like documentation or interactive plugins. It also provides a handy way to integrate external API interfaces for applications like maps, calendars, or calculators directly into your page.

Embedding Videos

To embed a YouTube video, use the iFrame code that YouTube provides.

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

This method works well for embedding tutorials, advertisements, and educational content. It also gives you control over formatting while keeping the embedded iframe content isolated.

Displaying Google Maps

You can include an interactive map on your site using an iFrame.

<iframe
  width="600"
  height="450"
  src="https://www.google.com/maps/embed?pb=!1m2!2m1!1sEiffel+Tower"
  title="Map of the Eiffel Tower"
></iframe>

Google Maps gives you the exact code for any place under Share > Embed a map. Many businesses use this on contact pages to help users locate their offices. This also allows users to interact with content in a separate DOM environment.

Embedding Third-Party Webpages

You can display an external website within your page using an iFrame.

<iframe src="https://www.wikipedia.org/" width="800" height="500"></iframe>

Dashboards, analytics tools, and help documentation often use this technique.

Examples of the HTML iFrame

Embedding a Google Document in an iFrame

To show a Google Document inside an iFrame, publish it (File > Share > Publish to web) and use the embed link:

<iframe
  src="https://docs.google.com/document/d/e/your-published-doc-id/pub?embedded=true"
  width="700"
  height="500"
  title="Published Google Doc"
></iframe>

Readers see a read-only version of the document. Publishing to the web makes the document public to anyone with the link.

Positioning an iFrame with CSS

You can move an iFrame anywhere on the page using CSS.

<iframe id="myIframe" src="https://example.com" width="500" height="300"></iframe>

<style>
    #myIframe {
        position: absolute;
        top: 50px;
        left: 100px;
    }
</style>

This method works well for floating widgets or interactive pop-ups.

Centering an iFrame

You can center an iFrame on the page using CSS Flexbox.

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <iframe src="https://example.com" width="600" height="400"></iframe>
</div>

This approach is ideal for embedding video players or full-page interactive tools.

Learn More About the HTML iFrame

Customizing an iFrame with CSS

You can modify an iFrame’s appearance with CSS to match your site’s design.

<iframe
  src="https://example.com"
  width="600"
  height="400"
  style="border: 2px solid black; border-radius: 10px;"
></iframe>

This is useful for embedding forms or surveys that need a styled frame.

Securing an iFrame

The embedded site decides whether it can be framed at all. It can block framing with the X-Frame-Options header (DENY blocks all framing, while SAMEORIGIN only allows pages on the same origin), or with the Content Security Policy frame-ancestors directive. You can't override that from your page.

On your side, the sandbox attribute restricts what the embedded content can do.

<iframe src="https://example.com" sandbox></iframe>

This is especially useful when embedding third-party content with untrusted scripts.

Embedding Local HTML Content

Instead of loading an external URL, you can display a local HTML file inside an iFrame.

<iframe src="local-file.html" width="600" height="400"></iframe>

Modular web applications often use this method.

Making an iFrame Responsive

Ensure that an iFrame scales properly on all screen sizes by using CSS.

<style>
    .iframe-container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>

<div class="iframe-container">
    <iframe src="https://example.com"></iframe>
</div>

This approach is perfect for embedding videos that need to fit different devices.

HTML iFrame vs. Other Embedding Methods

iFrame vs. Object Tag

The <object> tag embeds external content but works best for non-web content like PDFs.

<object data="https://example.com" width="600" height="400"></object>

This approach is sometimes preferable when embedding documents.

iFrame vs. Embed Tag

The <embed> tag primarily handles media content.

<embed src="video.mp4" width="600" height="400">

This works well for audio and video playback.

Frequently Asked Questions About HTML iFrame

Can JavaScript Interact with an iFrame?

Yes. If the embedded page is on the same origin as your page, iframe.contentDocument and iframe.contentWindow give your script full access to it. If it's on a different origin, iframe.contentDocument is null, so the two pages communicate by sending messages with iframe.contentWindow.postMessage() and listening for them with a message event listener.

How Can You Load a Website That Blocks iFrames?

If the site's X-Frame-Options header (DENY, or SAMEORIGIN when your page is on a different origin) or Content Security Policy frame-ancestors directive excludes your page, you can't embed it unless the site owner changes that header.

How Do You Hide Scrollbars in an iFrame?

The scrolling="no" attribute is obsolete, though browsers still honor it.

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

If you control the embedded page, use CSS overflow: hidden; inside it instead.

How Do You Make an iFrame Transparent?

iFrames are transparent by default, and the allowtransparency attribute is non-standard. The embedded page just needs a transparent background on its html and body elements:

html, body {
    background: transparent;
}

The HTML iFrame gives you a flexible way to embed external content, making it a valuable tool for integrating videos, maps, third-party widgets, and dynamic web applications. However, always consider security restrictions and mobile responsiveness when embedding iFrames in your projects.