You placed your own video with <video>. But sometimes you want to show “that video on YouTube” or “a map of a shop’s location” right inside your page. That’s when you use <iframe>. It’s a tag that slots someone else’s page in as a “small window” inside your own page.
Embedding YouTube
On a YouTube video page, choose “Share → Embed,” and you get code shaped like this.
<iframe src="https://www.youtube.com/embed/xxxxxxxx"></iframe>The xxxxxxxx part of src is the number unique to each video. Just paste this code into your page, and a player with a play button is embedded right there. You can place a YouTube video on your page without preparing a video file of your own.
Embedding a map
Google Maps works the same way. On a map, choose “Share → Embed a map,” and you get <iframe> code.
<iframe src="https://www.google.com/maps/embed?..."></iframe>Place it on a shop introduction or an about-me page, and you get a page with a map that shows the location at a glance.
The window’s size comes from width and height
You decide the window’s size with width and height.
<iframe src="..." width="560" height="315"></iframe>| What you write | Meaning |
|---|---|
src | The address of what you’re embedding |
width / height | The window’s width and height (numbers are pixels) |
Two extras you’ll often see
Besides src and width / height, the official embed code sometimes comes with writing like this.
<iframe
src="https://www.youtube.com/embed/xxxxxxxx"
title="Shima Channel video"
width="560"
height="315"
allowfullscreen
></iframe>| What you write | Meaning |
|---|---|
title="..." | A description of what this window shows. For screen-reader software |
allowfullscreen | Allows the full-screen button |
title plays a role similar to the alt on <img>: it doesn’t appear on screen, but it conveys “what this embed is.” Adding allowfullscreen makes the full-screen button in the bottom-right of the YouTube player actually work. Both are often included in the official embed code from the start, so leave them in and use them as is.
Summary of this lesson
- With
<iframe src="address">, you slot in another page like a window - For both YouTube and maps, the basic move is to copy and paste the official “embed code”
- Size is
width/height. Only embed safe services you know
That wraps up the “Images and media” chapter. Photos, captions, video, sound, and embedding — the materials that add color to a page are all in place.