HTML Iframes: Embedding Another Page with src and title

An <iframe> embeds one web page inside another. Every YouTube video you've ever seen sitting inside someone else's blog post is an iframe pointing back at youtube.com.

This is the written version of my HTML iframes video, part of my HTML beginners course. It's embedded near the top.

Key Takeaways

• <iframe src="..." title="..."> embeds another page. src is the page to embed, title describes it for screen readers.
• width and height set the iframe's size, either as HTML attributes or in CSS.
• Not every page can be framed. Sites can block it with a security header, and you'll get a blank box instead of an error.
• Add the sandbox attribute to restrict what embedded content is allowed to do, especially for anything you don't control.
• loading="lazy" defers loading an off-screen iframe until it's about to scroll into view.

The iframe tag

An iframe needs a src (the page to embed) and a title (a text description for accessibility):

<iframe src="https://www.bing.com" title="Bing search"></iframe>

Without any sizing, the iframe renders at a default size that varies by browser. That default is rarely what you want, so you'll almost always set width and height explicitly.

Sizing an iframe

Set width and height directly on the tag, or handle it in CSS:

<iframe
  src="https://www.bing.com"
  title="Bing search"
  width="100%"
  height="500"
></iframe>

width="100%" makes the iframe fill its container and resize as the browser window does. A fixed height in pixels is common since percentage heights behave inconsistently for iframes without extra CSS.

Not every page can be framed

Try embedding some sites and you'll get a blank box instead of the page you expected, with no error message explaining why. That's usually intentional: a site can send an X-Frame-Options header or a Content-Security-Policy with frame-ancestors set, telling browsers to refuse to render it inside a frame at all. This is a real security feature, not a bug, aimed at preventing clickjacking, where a malicious site frames your page invisibly to trick visitors into clicking something they didn't mean to. If an iframe embed comes up blank, check whether the source page allows framing before assuming your markup is wrong.

A safer default: the sandbox attribute

When you're embedding content you don't fully control, sandbox restricts what it's allowed to do:

<iframe
  src="https://example.com/widget"
  title="Embedded widget"
  sandbox="allow-scripts allow-same-origin"
></iframe>

With a bare sandbox attribute and no values, the embedded page can't run scripts, submit forms, or open popups at all. Add specific allow-* values only for what you actually need. Reach for it on any iframe embedding third-party content, obviously risky or otherwise.

Lazy-loading iframes

For an iframe further down the page, loading="lazy" defers loading it until the visitor scrolls near it:

<iframe src="https://www.youtube.com/embed/example" title="Example video" loading="lazy"></iframe>

This saves bandwidth and speeds up the initial page load on pages with embeds the visitor may never scroll to.

Real-world example: YouTube embeds

Every embedded YouTube video on the web is an <iframe> pointing at a youtube.com/embed/ URL, with width, height, and title set, usually alongside allowfullscreen so the video can go full-screen:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Example video"
  loading="lazy"
  allowfullscreen
></iframe>

Right-click any embedded YouTube video and view the page source, and you'll find exactly this pattern.

See MDN's iframe element reference for the full set of attributes, including allow for permissions like camera and microphone access.

Where to go next

HTML Forms and HTML Tables cover the next two structural elements in this course. HTML Links and Anchor Tags covers linking, which pairs naturally with anything you embed.

FAQ

What's the difference between src and title on an iframe?

src is the URL of the page being embedded. title is a text description of the embedded content, used by screen readers since an iframe has no other way to announce what it contains.

Why is my iframe showing a blank box?

The site you're trying to embed is likely blocking it with an X-Frame-Options header or a Content-Security-Policy frame-ancestors rule. This is a deliberate security measure many sites use to prevent clickjacking, not a mistake in your markup.

What does the sandbox attribute do?

It restricts what the embedded page can do: run scripts, submit forms, open popups, and more. A bare sandbox attribute blocks all of that; add specific allow-* values to permit only what the embed actually needs.

Should I always use loading="lazy" on iframes?

For anything below the initial viewport, yes. It defers loading until the iframe is about to scroll into view, which speeds up the rest of the page.

How does YouTube's embed actually work?

It's a standard <iframe> pointing at a youtube.com/embed/ URL, with width, height, title, and usually allowfullscreen set. There's no special YouTube-specific HTML involved.