Googleマップの地図やYouTubeの動画を自分のページに表示するときに使うのが、iframe タグです。この記事では、iframe の仕組みと、埋め込みのコードの取り方、よく使う属性、スマホ対応、気をつけたいことをまとめます。
iframeとは
iframe（inline frame）は、ページの中に「別のページを表示する窓」を作るタグです。窓の中には別のサイトのページがそのまま動いているので、読者は自分のページを離れずに、地図を動かしたり、動画を再生したりできます。
Googleマップを埋め込む
埋め込み用のコードを取る
Googleマップを埋め込むときは、アドレスバーのURLではなく、埋め込み用のコードを使います。
- Googleマップで場所を開く
- 「共有」を押し、「地図を埋め込む」を選ぶ
- 大きさを選んで「HTMLをコピー」を押す
コピーされるのは、次のような iframe のコードです（src の長い部分は「…」で省略しています）。読みやすいように属性ごとに改行し、title を足しています。
<iframe
src="https://www.google.com/maps/embed?pb=…"
title="東京タワーの地図"
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin">
</iframe>
属性の意味
| 属性 | 意味 |
|---|---|
src | 窓の中に表示するページのURL |
title | 何の窓かを表す説明。画面読み上げソフトが読み上げるので、付けておく |
width・height | 窓の幅と高さ |
style="border:0;" | 窓のまわりの枠線を消す |
allowfullscreen | 全画面表示を許可する |
loading="lazy" | 画面に近づいてから読み込む。ページの下のほうにある地図や動画は、付けておくとページの表示が速くなる |
referrerpolicy | 埋め込み先に、どのページから表示されているかをどこまで伝えるか |
YouTubeを埋め込む
YouTubeも、動画の下の「共有」→「埋め込む」で iframe のコードを取れます。VIDEO_ID の部分が動画ごとのIDになります。
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="YouTubeの動画：動画のタイトル"
width="560"
height="315"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
loading="lazy">
</iframe>YouTubeの埋め込み画面で「プライバシー強化モード」をオンにすると、youtube-nocookie.com のURLになり、再生されるまで読者のCookieを使わないようになります。allow は、埋め込んだページにどの機能を使わせるかの指定で、YouTubeが出すコードのままで構いません。
スマホではみ出さないようにする
width="600" のままだと、画面の狭いスマホでははみ出します。CSSで幅を画面に合わせ、aspect-ratio（縦横の比）で高さを決めると、形を保ったまま縮みます。
/* class を付けた iframe だけに当てる */
iframe.embed-video {
width: 100%; /* 画面幅に合わせる */
height: auto;
aspect-ratio: 16 / 9; /* 動画は 16:9 */
}
iframe.embed-map {
width: 100%;
height: auto;
aspect-ratio: 4 / 3; /* 地図は 4:3 など */
}使うときは、iframe に class="embed-video" や class="embed-map" を足します。iframe { … } のようにページのすべての iframe に当てると、広告など iframe で表示されているほかの部品の形まで変わってしまうので、class で対象を絞ります。
気をつけたいこと
埋め込みを断っているサイトがある
どのページでも埋め込めるわけではありません。多くのサイトは、他のサイトの iframe の中で表示されないように、X-Frame-Options や Content-Security-Policy の frame-ancestors という設定をしています。その場合、窓の中は空白やエラーの表示になります。地図や動画のように「埋め込み用のコード」を用意しているサービスだけが、埋め込みできると考えておきます。
信頼できないページは sandbox で制限する
窓の中のページは、JavaScriptを動かしたり、リンクで移動させたりできます。自分で管理していないページを表示するときは、sandbox 属性を付けると、こうした動きをまとめて止められます。必要なものだけを sandbox="allow-scripts" のように許可します。GoogleマップやYouTubeのように動作に JavaScript が必要なものは、各サービスが出すコードのまま使います。
埋め込み先は読者のCookieを使うことがある
GoogleマップやYouTubeを埋め込むと、読者がそのページを開いただけで、埋め込み先のサービスに接続し、Cookieが使われることがあります。ブログのプライバシーポリシーに、外部のサービスを埋め込んでいることを書いておくと安心です。
WordPressでは
WordPressでは、YouTubeなどの動画は「埋め込み」ブロック（「YouTube」ブロックなど）にURLを貼るだけで埋め込めます。段落に動画のURLだけを1行で貼っても、自動で埋め込みに変わります。Googleマップのように対応していないものは、「カスタムHTML」ブロックに iframe のコードを貼ります。
自分で用意した動画を自分のサーバーから配信する場合は、iframe ではなく video タグを使います（「audioタグとvideoタグの使い方」）。HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- iframe は、ページの中に別のページを表示する窓を作る
- GoogleマップやYouTubeは、「共有」→「埋め込む」で出るコードを使う。title を足しておく
- スマホではみ出さないように、CSSで
width: 100%とaspect-ratioを指定する - 埋め込みを断っているサイトもある。信頼できないページは
sandboxで制限する - WordPressでは動画はURLを貼るだけ、地図はカスタムHTMLブロックにコードを貼る
コメント