HTML Iframes

What is an Iframe?

An <iframe> or inline frame is used to embed another HTML document inside the current web page. In simple terms, it creates a window within your page that displays content from another source. This can be another page from the same website or content from an external website that allows embedding.

Iframes are commonly used to embed YouTube videos, Google Maps, forms, documentation widgets, dashboards, and isolated tools. Because the embedded content is loaded in its own browsing context, it behaves somewhat independently from the parent page.

Even though iframes are powerful, they should be used carefully. They can affect performance, accessibility, responsiveness, and security if not configured properly.

Basic Iframe

The simplest iframe only needs the src attribute. In practice, you should also provide a title, along with width and height or CSS styles so the embedded area appears correctly on the page.

<!-- Basic iframe -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>

<!-- Embed a local page -->
<iframe src="about.html" width="100%" height="300"></iframe>

<!-- Embed a YouTube video -->
<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
    allowfullscreen>
</iframe>

<!-- Embed Google Maps -->
<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen
    loading="lazy">
</iframe>

<!-- Responsive iframe (CSS trick) -->
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        style="position:absolute; top:0; left:0; width:100%; height:100%;"
        frameborder="0" allowfullscreen>
    </iframe>
</div>

Embedding a Page from the Same Website

If you want to show one page of your own website inside another, you can use an iframe with a local file or route. This is sometimes useful for previews, documentation demos, admin tools, or isolated widgets. Since both pages belong to the same site, you usually have more control over styling and permissions.

<iframe
    src="help-center.html"
    title="Help Center Preview"
    width="100%"
    height="350">
</iframe>

Responsive Iframes

Fixed-width iframes can overflow on smaller screens, especially on phones. A common solution is to wrap the iframe inside a container and use CSS to maintain an aspect ratio. This is especially useful for videos and maps.

<style>
.iframe-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>

<div class="iframe-wrap">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Embedded tutorial video"
        allowfullscreen>
    </iframe>
</div>

Iframe Attributes

Security and sandbox

Iframes can load content from other websites, which means security is an important concern. The sandbox attribute limits what the embedded page can do. Without sandboxing, an embedded page may have more freedom than you intended.

You can selectively allow features like forms, scripts, or popups by adding sandbox permissions. This makes iframe embedding safer, especially when the content is from a third-party source.

<iframe
    src="https://example.com/widget"
    title="External widget"
    sandbox="allow-scripts allow-forms"
    loading="lazy"
    width="600"
    height="400">
</iframe>

Common Use Cases

• Embedding YouTube or Vimeo videos into blog posts and tutorials.
• Showing Google Maps location widgets on contact pages.
• Displaying payment, booking, or chat widgets supplied by third-party providers.
• Loading documentation previews or internal tools in an isolated area.
• Embedding dashboards, charts, or reports from external systems.

Best Practices

• Always add a meaningful title attribute for accessibility.
• Use loading="lazy" for below-the-fold embeds to improve performance.
• Prefer responsive wrappers instead of fixed sizes for mobile-friendly layouts.
• Use sandbox where possible for safer third-party embedding.
• Test whether the external site actually permits iframe embedding before relying on it.