Embedding External Content: <iframe>

<iframe> (inline frame) lets you embed a separate HTML document — or any external web content — directly inside your page. Maps, embedded videos, and third-party widgets all use this element.

Basic syntax

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

<iframe> is not self-closing — it has an opening and closing tag. The three essential attributes are:

• src — the URL of the content to embed
• width and height — the display size in pixels
• title — a text description of what is embedded (required for accessibility)

The title attribute

Screen readers announce an <iframe> by its title. Without it, the user hears “frame” with no context about what is inside.

<!-- Bad — no context for assistive technology -->
<iframe src="https://maps.google.com/..." width="600" height="400"></iframe>

<!-- Good — describes the content -->
<iframe src="https://maps.google.com/..." width="600" height="400" title="Map showing our office location"></iframe>

Always write a title that describes the specific content, not just the type. “Map” is better than nothing. “Map showing our office location” is better still.

Embedding a map

A common use case is a Google Maps embed. The map provider gives you an embed URL:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  title="Map of downtown Portland, Oregon"
></iframe>

The long src URL comes from the map provider — you copy it from their embed tool, not write it yourself.

Embedding a video

YouTube and other video platforms generate an embed <iframe> for each video. The URL uses the platform’s embed endpoint, not the regular watch URL:

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="Introduction to HTML — video tutorial"
></iframe>

Notice the URL path is /embed/ not /watch?v=. Platforms generate this URL for you via a Share → Embed button. Do not construct it manually.

When embedding is blocked

Many websites set HTTP headers that prevent their content from being embedded in an <iframe>. If you try to embed a site that blocks framing, you will see a blank or error state inside the frame. This is a security decision by the site being embedded — you cannot override it. Only embed content that explicitly provides an embed URL (maps, video platforms, widgets).

Exercise

Open index.html in VS Code.

You are going to add an <iframe> embed to your page. Use one of these options — whichever fits your topic:

• A YouTube video embed
• A Google Maps location

If your topic does not fit either, use a placeholder:

<iframe
  src="about:blank"
  width="560"
  height="315"
  title="Placeholder embed"
></iframe>

1. Find a <section> in your page where an embedded video or map would make sense.
2. After the section’s <p>, add an <iframe> with src, width, height, and title:

<section>
  <h2>Finding the Trailhead</h2>
  <p>The trailhead is located at the north end of the parking lot.</p>
  <iframe
    src="about:blank"
    width="600"
    height="450"
    title="Map showing the trailhead location"
  ></iframe>
</section>

3. Save and open index.html in your browser. The about:blank iframe will render as an empty box — that is fine. The element, size, and title are what matter.

Recap

• <iframe> embeds a separate document or external content inline in your page.
• Always include src, width, height, and title.
• title is required for screen readers — describe the specific content, not just the type.
• Many sites block iframe embedding. Only embed content that provides an official embed URL.
• Video platforms and maps generate the embed src URL for you — copy it, do not write it manually.