自分の動画は <video> で置きました。でも「YouTubeにある、あの動画」や「お店の場所の地図」を、ページの中にそのまま映したいこともありますよね。そんなときに使うのが <iframe>（アイフレーム）。よそのページを、自分のページの中の“小さな窓”としてはめ込むタグです。
YouTubeを埋め込む
YouTubeの動画ページで「共有 → 埋め込む」を選ぶと、こんな形のコードがもらえます。
<iframe src="https://www.youtube.com/embed/xxxxxxxx"></iframe>src の xxxxxxxx の部分が、動画ごとの番号。このコードをページに貼るだけで、再生ボタン付きのプレーヤーがそのまま埋め込まれます。自分で動画ファイルを用意しなくても、YouTubeの動画をページに置けるわけです。
地図を埋め込む
Googleマップも同じしくみ。地図で「共有 → 地図を埋め込む」を選ぶと、<iframe> のコードがもらえます。
<iframe src="https://www.google.com/maps/embed?..."></iframe>お店紹介や自己紹介のページに置けば、場所がひと目で伝わる地図つきページになります。
窓の大きさはwidthとheightで
窓の大きさは、width（幅）と height（高さ）で決められます。
<iframe src="..." width="560" height="315"></iframe>| 書くもの | 意味 |
|---|---|
src | 埋め込む先の住所 |
width / height | 窓の幅・高さ（数字はピクセル） |
このレッスンのまとめ
<iframe src="住所">で、よそのページを窓のようにはめ込む- YouTubeも地図も、公式の「埋め込みコード」をコピーして貼るのが基本
- 大きさは
width/height。埋め込むのは知っている安全なサービスだけ
これで「画像とメディア」の章はおしまい。写真・キャプション・動画・音声、そして埋め込みと、ページを彩る材料がそろいました。