How Do You Use Iframes in HTML5? Examples & Complete Guide

An iframe in HTML5 allows you to display another webpage, video, map, or external document directly inside your website. Whether you want to embed a YouTube video, show a Google Map, or display an external resource, the HTML <iframe> element makes it possible without redirecting visitors away from your page.

In this guide, you’ll learn how to use iframes in HTML5, explore practical code examples, understand important iframe attributes, and discover how to make embedded content responsive and secure.

What Is an Iframe in HTML5?

An iframe, short for inline frame, is an HTML element that embeds another HTML document within the current webpage.

The embedded content appears inside a rectangular area on your page and operates independently from the surrounding document.

Common uses of iframes include:

• Embedding YouTube videos
• Displaying Google Maps
• Showing external webpages
• Embedding online forms
• Displaying interactive presentations and documents

The iframe HTML element is supported in HTML5 and modern browsers.

How to Use Iframes in HTML5

You can create an iframe using the <iframe> tag and the src attribute, which specifies the URL of the content you want to display.

Basic iframe HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML iframe Example</title>
</head>
<body>

    <h1>My First Iframe</h1>

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

</body>
</html>

In this example:

• src specifies the webpage to embed.
• width defines the iframe’s width.
• height defines the iframe’s height.
• title provides an accessible description for screen readers.

Replace https://example.com with the URL you want to embed. Some websites prevent their pages from being displayed inside iframes.

Important Iframe Attributes in HTML5

HTML5 provides several iframe attributes that help you control embedded content.

Attribute	Purpose
src	Specifies the embedded document’s URL
width	Sets the iframe width
height	Sets the iframe height
title	Describes the embedded content for accessibility
loading	Controls when the iframe loads
sandbox	Restricts capabilities of embedded content
allow	Specifies permissions for certain browser features
referrerpolicy	Controls referrer information sent with requests

Example Using Multiple Iframe Attributes

<iframe
    src="https://example.com"
    width="100%"
    height="400"
    title="Embedded Example Website"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin">
</iframe>

The loading="lazy" attribute can improve page performance by delaying the loading of offscreen content until it is needed.

How to Embed a YouTube Video Using an Iframe

One of the most common uses of an iframe is embedding a YouTube video.

Example

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write;
           encrypted-media; gyroscope; picture-in-picture;
           web-share"
    allowfullscreen>
</iframe>

Replace VIDEO_ID with the actual YouTube video ID.

You can also copy the embed code directly from YouTube:

1. Open the YouTube video.
2. Click the Share button.
3. Select Embed.
4. Copy the iframe code.
5. Paste it into your HTML document.

How to Make an Iframe Responsive in HTML5

A fixed-width iframe may not fit smaller screens. You can use CSS to make it responsive.

Responsive Iframe Example

<style>
    .iframe-container {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .iframe-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>

<div class="iframe-container">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Responsive YouTube Video"
        loading="lazy"
        allowfullscreen>
    </iframe>
</div>

The aspect-ratio property maintains the video’s proportions while the iframe adjusts to the available width.

How to Use the Sandbox Attribute

The sandbox attribute adds restrictions to an iframe, helping protect your website when embedding external or untrusted content.

Example

<iframe
    src="https://example.com"
    title="Restricted Embedded Content"
    sandbox>
</iframe>

By default, sandboxing restricts several capabilities, including scripts, form submissions, and certain navigation actions.

You can selectively enable capabilities when necessary:

<iframe
    src="https://example.com"
    title="Embedded Content"
    sandbox="allow-scripts allow-forms">
</iframe>

Only grant permissions that the embedded content genuinely requires. Avoid combining permissions without understanding their security implications.

Common Iframe Problems and Solutions

The Website Does Not Load

Some websites block iframe embedding using security headers such as X-Frame-Options or Content Security Policy. You generally cannot override these restrictions from your own HTML.

The Iframe Is Too Large on Mobile

Use a responsive container with width: 100% and an appropriate aspect-ratio instead of fixed dimensions.

The Page Loads Slowly

Use loading="lazy" for below-the-fold iframes and avoid embedding unnecessary third-party content.

The Iframe Is Not Accessible

Always include a meaningful title attribute so users relying on assistive technologies can understand the embedded content.

Are Iframes Good for SEO?

Iframes can provide useful supplementary content, such as videos, maps, and interactive tools. However, search engines may not treat embedded content in the same way as text written directly in your webpage.

For better SEO:

• Keep important information in the parent page’s HTML.
• Add descriptive headings and explanatory text around embedded content.
• Use meaningful iframe titles.
• Avoid relying on an iframe as the only source of essential page information.
• Optimize loading performance and mobile usability.

For more beginner-friendly tutorials, explore the HTML5 Complete Guide for Beginners and visit the ToolMentors Blog.

Frequently Asked Questions

1. What is an iframe in HTML5?

An iframe is an HTML element that embeds another webpage or document within the current webpage.

2. How do you create an iframe in HTML5?

Use the <iframe> element with a src attribute pointing to the webpage you want to embed. Add width, height, and title attributes as needed.

3. What is the syntax of an iframe in HTML?

The basic syntax is:

<iframe src="URL" title="Description"></iframe>

4. What are the most commonly used iframe attributes?

Common attributes include src, title, width, height, loading, sandbox, allow, and referrerpolicy.

5. How do you embed a YouTube video using an iframe?

Open the YouTube video’s Share menu, select Embed, copy the provided iframe code, and paste it into your HTML.

6. How do you make an iframe responsive in HTML5?

Set the iframe width to 100% and use CSS aspect-ratio or a responsive wrapper to maintain the desired dimensions.

7. What does the sandbox attribute do in an iframe?

The sandbox attribute restricts features such as scripts, forms, and navigation inside the embedded document. Add only the permissions the content requires.

8. Can you embed another website using an iframe?

Yes, if the website permits embedding. Some sites block iframe display through security headers such as X-Frame-Options or Content-Security-Policy.

9. How do you improve iframe loading speed?

Use loading="lazy" for iframes that appear below the fold and avoid loading unnecessary embedded content.

10. Are iframes good for SEO?

Iframes are useful for supplementary content, but important text and information should be available directly in the parent page’s HTML.

Conclusion

Iframes are a useful HTML5 feature for embedding videos, maps, external webpages, and interactive content. By understanding iframe attributes, responsive design, lazy loading, and sandbox security, you can create a better experience for your website visitors.

Explore more practical HTML tutorials on ToolMentors. If you found this guide helpful, you can also buy us a cup of coffee to support our free tutorials.