HTML — Iframes

What an iframe is

An <iframe> (inline frame) embeds another complete web page inside your page:

<iframe src="https://example.com" width="500" height="300"
        title="Example site preview"></iframe>

What the browser displays

(A rectangular window on your page containing a fully functional second page — its own scrolling, its own links.)

Think of it as a picture-in-picture window between pages.

Core attributes

Attribute	Purpose
src	URL of the embedded page
width / height	Frame size in pixels (or CSS units)
title	Accessible description — screen readers need it
loading="lazy"	Defer loading until scrolled near — big perf win
sandbox	Security restrictions on the embedded content

<iframe src="demo.html" width="600" height="400"
        title="Interactive demo" loading="lazy"></iframe>

Always include a meaningful title — it's how assistive tech explains what the frame contains.

The classic use: video embeds

YouTube's "Share → Embed" hands you exactly this:

<iframe width="560" height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player"
        frameborder="0"
        allowfullscreen>
</iframe>

Paste it anywhere in your HTML — instant video player. Google Maps embeds work the same way:

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450" title="Our location">
</iframe>

Most modern embeds (videos, maps, social posts, music players) are iframes under the hood. You'll copy-paste these snippets constantly as a developer.

Why embedding exists

Security model: browsers won't let one site's JavaScript freely manipulate another site's content. Iframes create a bounded window — the inner page runs in isolation from yours. That's what makes it safe for any site to embed YouTube without trusting it with page data.

The sandbox attribute tightens this further for untrusted content:

<iframe src="untrusted-widget.html" sandbox></iframe>

A bare sandbox blocks scripts, forms, popups — everything. Selective permissions are added via values:

<iframe src="widget.html" sandbox="allow-scripts allow-forms"></iframe>

Styling frames

The iframe itself is styled like any box; the content inside is untouchable by your CSS:

iframe {
    border: 2px solid #ccc;
    border-radius: 8px;
}

<!-- Responsive 16:9 video wrapper pattern -->
<div style="position:relative; padding-top:56%;">
    <iframe src="https://www.youtube.com/embed/ID"
            style="position:absolute; inset:0; width:100%; height:100%;"
            title="Video"></iframe>
</div>

That wrapper trick keeps videos proportional at any screen width — you'll meet padding-top aspect-ratio hacks again in CSS.

Common mistakes checklist

1. Missing title — accessibility failure on every audit
2. Embedding heavy frames above the fold without loading="lazy" — slow first paint
3. Trying to style inner content from the parent page — impossible by design
4. Fixed pixel sizes that overflow mobile screens — prefer the responsive wrapper

Mini Practice

1. Embed any Wikipedia article into frame.html with a proper title
2. Add width="100%" height="300" and watch it stretch with the window
3. Embed a YouTube video using the official share snippet
4. Wrap the video in the responsive 16:9 pattern and resize the browser
5. Add sandbox="" to one frame and observe what stops working

Next: JavaScript in HTML →