LESSON 21

Embedding Content

Learning objective: Embed external content such as maps or videos with iframes.

Understand

An iframe places another web page inside yours.

The <iframe> element embeds an external page — a map, a hosted video, or another site. Set its src, give it a title for accessibility, and size it with width and height. Only embed sources you trust.

Analogy: An iframe is like a window cut into your page showing the view from another site.

See It in Action

Embedding an external page:

<iframe src="https://example.com"
        title="Example site"
        width="400" height="300"></iframe>
How it works: src is the page to embed, title describes it for screen readers, and width/height set its size on your page.

Try It Yourself

  1. Embed a public map or video using an <iframe>.
  2. Give it a descriptive title.
  3. Adjust its width and height.

Quick Quiz

What does an <iframe> let you do?

Challenge

Embed a map or a hosted video into one of your pages with a proper title.

Success condition: The embedded content displays inside your page and has a title.