HTML iFrame: Syntax, Usage, and Examples

An HTML iFrame lets you embed external web content within a webpage. You can use it to integrate videos, maps, forms, and other interactive elements without modifying the embedded content’s source code. This HTML element acts as an inline frame and creates a separate browsing context within the current HTML page. It behaves like a small window displaying another HTML document inside your page.

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"></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.
• frameborder: Controls the border around the iFrame (0 removes it).
• 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 srdoc 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=!1m18!1m12!1m3!1d3151.8354345086195!2d144.96315781531654!3d-37.81362797975179"></iframe>

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

If you want to load an interactive Google Document inside an iFrame, use this:

<iframe src="https://docs.google.com/document/d/your-doc-id/edit" width="700" height="500"></iframe>

This is a great way to embed live documents in collaboration tools.

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

Some websites prevent embedding with the X-Frame-Options: DENY header. You can enhance security by using the sandbox attribute to restrict an iFrame’s functionality.

<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%;
    }
</style>

<div class="iframe-container">
    <iframe src="https://example.com" frameborder="0"></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, JavaScript can manipulate an iFrame, but cross-origin restrictions prevent accessing content from different domains unless both pages allow it.

How Can You Load a Website That Blocks iFrames?

If a site has X-Frame-Options: DENY, embedding it is impossible unless you modify the source.

How Do You Hide Scrollbars in an iFrame?

Use the scrolling="no" attribute to remove scrollbars.

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

How Do You Make an iFrame Transparent?

Set the allowtransparency attribute and use CSS to make an iFrame’s background transparent.

<iframe src="https://example.com" allowtransparency="true" style="background: transparent;"></iframe>

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.