HTML iframe Element | Docs With Examples

The HTML iframe (Inline Frame) element allows you to embed another HTML page within the current webpage. It is commonly used for displaying external content, such as videos, maps, advertisements, and interactive widgets. The HTML iframe element is widely supported across different browsers, making it a crucial component of modern web development.

Basic Syntax of an HTML <iframe>

If you're looking for a general way to include iframes in your HTML projects, use this basic syntax:

<iframe src="https://hackr.io" width="600" height="400" frameborder="0" title="Example Iframe"></iframe>

• src (Source URL of the page): Specifies the URL of the webpage to embed.
• width and height: Define the size of the iframe in pixels.
• frameborder: Defines whether the iframe has a border (deprecated in HTML5; use CSS instead).
• title attribute: Provides accessibility support by describing the iframe’s content.

Controlling <iframe> Behavior

1. Customizing Borders and Styles

You can add or remove iframe borders using the style attribute.

iframe {
    border: 2px solid black;
    border-radius: 5px;
}

2. Removing Scrollbars

By default, if the content inside an iframe exceeds the given dimensions, scrollbars will appear. You can remove them using CSS:

iframe {
    overflow: hidden;
    border: none;
}

Embedding YouTube Videos with <iframe>

YouTube provides an iframe embed code to insert videos into your HTML document. Open up an HTML editor to see for yourself.

<iframe width="560" height="315" src="https://www.youtube.com/embed/T4rt8LxvY1A?si=_sdXjIwIVr3byG-G" allowfullscreen allow="autoplay"></iframe>

Embedding Google Maps with <iframe>

You can embed a Google Map location using an iframe.

<iframe src="https://www.google.com/maps/embed?pb=!1m18" width="600" height="450" allowfullscreen></iframe>

Controlling Cross-Origin Access & Permissions

The cross-origin behavior of iframes is controlled using the referrerpolicy, sandbox, and allow attributes to manage navigations securely.

<iframe src="https://hackr.io" referrerpolicy="no-referrer" sandbox="allow-scripts" allow="camera; microphone"></iframe>

• referrerpolicy: Restricts referrer information sent to external websites.
• sandbox: Limits iframe permissions for security.
• allow attribute: Grants specific permissions (e.g., camera, microphone, geolocation).

Common Questions About HTML <iframe>

What is an HTML <iframe> used for?

An iframe is used to embed external content, such as videos, maps, and other HTML elements, within a webpage.

Can I use an <iframe> to embed another website?

Yes, but some websites block embedding using the X-Frame-Options header to prevent unauthorized display.

How do I make an <iframe> responsive?

Use CSS to make the iframe adjust to different screen sizes.

iframe {
    width: 100%;
    height: auto;
}

How do I set the size of the iframe dynamically?

You can set the iframe’s dimensions in pixels or use percentage values for responsiveness.

<iframe src="https://hackr.io" width="100%" height="500"></iframe>

Can I remove the border from an <iframe>?

Yes, you can use the frameborder attribute (deprecated) or CSS.

<iframe src="https://hackr.io" style="border: none;"></iframe>

How do I prevent an iframe from being interacted with?

Use the pointer-events CSS property:

iframe {
    pointer-events: none;
}

How do you include blocks in plain HTML not via iframe (HTML, CSS, and development)?

If you want to include external content without using an iframe, you can use server-side includes (SSI), AJAX, or embedding with JavaScript.

1. Using AJAX to Load Content Dynamically

<div id="content"></div>
<script>
    fetch('content.html')
        .then(response => response.text())
        .then(data => document.getElementById('content').innerHTML = data);
</script>

This fetches and injects content from an external file into a <div>.

2. Using Server-Side Includes (SSI) (for Apache servers)

<!--#include virtual="content.html" -->

This allows the server to insert an external HTML file.

3. Using JavaScript with innerHTML

<div id="external-content"></div>
<script>
    document.getElementById('external-content').innerHTML = '<h2>Embedded Content</h2><p>This content is inserted dynamically.</p>';
</script>

How do you embed a webpage within a webpage without using iframe HTML tags?

If you need to embed another webpage without using an <iframe>, consider the following alternatives:

3. Using the <object> Tag

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

3. Using the <embed> Tag

<embed src="https://example.com" width="800" height="600">

3. Using JavaScript to Fetch Content

<div id="webpage-container"></div>
<script>
    fetch('https://example.com')
        .then(response => response.text())
        .then(data => document.getElementById('webpage-container').innerHTML = data);
</script>

Key Takeaways

• The HTML iframe element embeds external webpages, videos, or maps within a webpage.
• Always consider security risks when using iframes.
• Use sandbox, allow, and referrerpolicy attributes to control iframe permissions.
• Make iframes responsive with CSS for better user experience.
• Alternatives to iframes include AJAX, <object>, <embed>, and JavaScript-based embedding.

Wrapping Up

HTML iframes provide a powerful way to include external content within a webpage. Whether embedding videos, maps, or third-party services, using iframes effectively enhances interactivity and usability. However, iframes are not the only solution; other methods like AJAX, <object>, and <embed> provide alternative ways to embed content seamlessly.