自分の動画は <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 | 窓の幅・高さ（数字はピクセル） |
よく見る2つの飾りつけ
公式の埋め込みコードには、src や width / height のほかにも、こんな書き方がついてくることがあります。
<iframe
src="https://www.youtube.com/embed/xxxxxxxx"
title="しまちゃんチャンネルの動画"
width="560"
height="315"
allowfullscreen
></iframe>| 書くもの | 意味 |
|---|---|
title="..." | この窓が何を映しているかの説明。読み上げソフト向け |
allowfullscreen | 全画面表示のボタンを許可する |
title は <img> の alt に似た役目で、画面には出ませんが「これは何の埋め込みか」を伝えます。allowfullscreen をつけておくと、YouTubeプレーヤーの右下にある全画面ボタンがちゃんと使えるようになります。どちらも公式の埋め込みコードには最初から入っていることが多いので、消さずにそのまま使いましょう。
このレッスンのまとめ
<iframe src="住所">で、よそのページを窓のようにはめ込む- YouTubeも地図も、公式の「埋め込みコード」をコピーして貼るのが基本
- 大きさは
width/height。埋め込むのは知っている安全なサービスだけ
これで「画像とメディア」の章はおしまい。写真・キャプション・動画・音声、そして埋め込みと、ページを彩る材料がそろいました。