HTMLへYouTube動画を埋め込むには、動画ページの「共有」から「埋め込む」を選び、表示されたiframeコードをコピーします。動画へのリンクを置くだけの場合と違い、読者はページを離れずに再生できます。
この記事では、埋め込みコードの取得手順、iframe属性の意味、スマートフォン対応、プライバシー強化モード、開始位置や字幕などのパラメータ、再生できないときの確認方法まで解説します。
HTMLにYouTube動画を埋め込む手順
埋め込みコードはパソコン版YouTubeから取得できます。次の順番で進めましょう。
- 埋め込みたいYouTube動画をパソコンで開く
- 動画の下にある「共有」を選ぶ
- 共有方法の一覧から「埋め込む」を選ぶ
- 必要なら開始位置などを設定する
- 表示されたHTMLコードをコピーする
- 自分のHTMLファイルへ貼り付ける
コピーしたコードは、動画を表示したい場所へ貼り付けます。次の例ではYouTube IFrame Player APIの公式サンプル動画IDを使用しています。
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>YouTubeが生成するコードは更新されることがあります。手入力だけで組み立てず、まず公式の「埋め込む」から最新コードを取得し、必要な部分を調整してください。
iframeの属性と役割
iframeは、現在のHTMLページ内へ別のWebページを表示する要素です。YouTubeの埋め込みプレイヤーも、YouTube側のページをiframe内へ読み込んでいます。
| 属性 | 役割 |
|---|---|
src | 埋め込みプレイヤーのURLと動画IDを指定する |
width・height | プレイヤーの基本寸法をCSSピクセルで伝える |
title | iframeの内容を支援技術へ説明する |
allow | 自動再生や全画面表示など、利用を許可する機能を指定する |
referrerpolicy | 埋め込み先へ送る参照元情報の方針を指定する |
allowfullscreen | 全画面表示を許可する |
loading="lazy" | 画面外のiframe読み込みを遅らせる |
srcは通常の動画URLではなくembed URLを使う
ブラウザのアドレス欄にあるhttps://www.youtube.com/watch?v=...をそのままsrcへ入れるのではなく、https://www.youtube.com/embed/動画ID形式の埋め込みURLを使います。
<!-- 埋め込み用URL -->
<iframe
src="https://www.youtube.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
></iframe>title属性で動画の内容を説明する
iframeには、内容を識別できるtitle属性を付けます。ページ内に複数の動画があるなら、すべてを「YouTube動画」にせず、「商品Aの使い方を解説する動画」のように区別できる名前へ変更しましょう。
frameborder属性は使わずCSSで枠線を消す
古い埋め込みコードで見かけるframeborder="0"は現在のHTMLでは使いません。枠線を消したい場合はCSSのborder: 0で指定します。
.youtube-player {
border: 0;
}YouTube動画をレスポンシブ表示する
コピーしたiframeは固定のwidthとheightを持つため、そのままではスマートフォンの画面からはみ出す場合があります。classを追加し、CSSで横幅100%と16:9の比率を指定しましょう。
<iframe
class="youtube-player"
width="560"
height="315"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>.youtube-player {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}width: 100%は親要素の幅に合わせ、aspect-ratio: 16 / 9は横幅が変わってもプレイヤーの比率を保ちます。ブラウザの幅を狭め、横スクロールや動画の変形がないことを確認してください。
最大幅を決めて中央に配置する
大きな画面で動画が広がりすぎる場合は、外側の要素へmax-widthを指定します。
<div class="youtube-wrapper">
<iframe
class="youtube-player"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
allowfullscreen
></iframe>
</div>.youtube-wrapper {
width: 100%;
max-width: 960px;
margin-inline: auto;
}
.youtube-player {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}width、max-width、aspect-ratioの考え方は、次の記事でも詳しく解説しています。
ページ全体をスマートフォンへ対応させる方法はこちらで確認できます。
プライバシー強化モードを使う
YouTubeのプライバシー強化モードでは、埋め込み動画の視聴をYouTube上の閲覧体験やパーソナライズへ利用しない形でプレイヤーを表示できます。埋め込みURLのドメインをwww.youtube.comからwww.youtube-nocookie.comへ変更します。
<iframe
class="youtube-player"
src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>プライバシー強化モードでも、動画を再生すればYouTubeとの通信は発生します。サイトの利用地域、同意管理、プライバシーポリシーに合わせて運用を判断してください。
開始位置・字幕・自動再生を設定する
埋め込みURLの末尾へクエリパラメータを追加すると、再生方法を調整できます。最初のパラメータは?、2つ目以降は&でつなぎます。
指定した秒数から再生する
startは動画の先頭から数えた開始秒、endは終了秒です。1分30秒から5分までなら、90秒と300秒を指定します。
<iframe
src="https://www.youtube.com/embed/M7lc1UVf-VE?start=90&end=300"
title="1分30秒から再生するYouTube動画"
allowfullscreen
></iframe>字幕を最初から表示する
cc_load_policy=1で字幕を既定表示し、cc_lang_pref=jaで日本語を優先できます。対象動画に指定言語の字幕が用意されている必要があります。
<iframe
src="https://www.youtube.com/embed/M7lc1UVf-VE?cc_load_policy=1&cc_lang_pref=ja"
title="日本語字幕を表示するYouTube動画"
allowfullscreen
></iframe>自動再生は慎重に使う
autoplay=1で自動再生を要求できますが、ブラウザのポリシーにより音声付き再生はブロックされることがあります。必要な場合はmute=1も指定し、iframeのallowへautoplayを含めます。
<iframe
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&mute=1&playsinline=1"
title="ミュートで自動再生するYouTube動画"
allow="autoplay; encrypted-media; picture-in-picture"
allowfullscreen
></iframe>自動再生は、ページを開いただけで再生処理やデータ共有が始まり、読者を驚かせる場合もあります。通常は再生操作を読者へ任せ、明確な理由がある場合だけ使いましょう。
rel=0でも関連動画は完全には消えない
現在のYouTubeでは、rel=0を付けても再生後の関連動画を完全に非表示にはできません。関連動画の候補を、埋め込んだ動画と同じチャンネルから選ぶ動作になります。
<iframe
src="https://www.youtube.com/embed/M7lc1UVf-VE?rel=0"
title="YouTube動画プレイヤー"
allowfullscreen
></iframe>画面外の動画は遅延読み込みする
YouTubeプレイヤーは複数のリソースを読み込むため、ページ下部にある動画へloading="lazy"を付けると、近くまでスクロールするまで読み込みを遅らせられます。
<iframe
class="youtube-player"
src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE"
title="YouTube動画プレイヤー"
loading="lazy"
allowfullscreen
></iframe>ページを開いた直後に見える重要な動画まで遅延すると、表示が遅く感じられることがあります。ファーストビューの動画は通常読み込み、画面外の動画へloading=”lazy”を使い分けてください。
YouTube動画を埋め込めないときの確認ポイント
動画所有者が埋め込みを許可しているか
動画の所有者が外部サイトへの埋め込みを無効にしている場合、iframeへ表示できません。非公開動画、削除済み動画、年齢や地域などの制限がある動画も再生できないことがあります。
エラー153が表示される
YouTubeの埋め込みプレイヤーは、HTTP Refererなどによる埋め込み元の識別を必要とします。Referrer-Policy: no-referrerで参照元を完全に削除すると、エラー153になる場合があります。
通常のブラウザ既定値であるstrict-origin-when-cross-originを維持し、サイト全体のHTTPヘッダー、iframeのreferrerpolicy、CDNやセキュリティ設定を確認してください。
埋め込みURLと動画IDを確認する
srcが/embed/動画ID形式になっているか、動画IDの前後へ余計な文字が入っていないか確認します。複数パラメータをつなぐときは、最初が?、以降が&です。
Content Security Policyやネットワーク制限を確認する
サイトのContent Security Policyでiframeの読み込み先を制限している場合、youtube.comやyoutube-nocookie.comが許可されているか確認します。学校や社内ネットワークでは、管理者側のフィルタリングでブロックされる場合もあります。
プレイヤーのサイズを小さくしすぎていないか
YouTube IFrame Player APIの要件では、プレイヤーの表示領域は少なくとも200×200ピクセル必要です。操作ボタンを表示する16:9プレイヤーは、480×270ピクセル以上が推奨されています。
WordPressへYouTube動画を埋め込む場合
WordPressのブロックエディターでは、YouTubeブロックへ通常の動画URLを貼るだけで埋め込める場合があります。独自HTMLブロックへiframeコードを貼る方法もありますが、利用権限やセキュリティ設定によってコードが除去されることがあります。
WordPress側のレスポンシブ処理やテーマCSSもあるため、公開後はパソコンとスマートフォンの両方で実際のプレイヤーを確認してください。
画像や動画を含むメディアのレスポンシブ対応を理解したい方は、こちらも参考にしてください。
まとめ
HTMLへYouTube動画を埋め込むときは、動画ページの「共有」から「埋め込む」を選び、生成されたiframeコードを貼り付けます。title属性を具体的にし、古いframeborder属性ではなくCSSで枠線を調整してください。
スマートフォン対応にはwidth: 100%とaspect-ratio: 16 / 9を使い、用途に応じてプライバシー強化モードやloading=”lazy”も検討します。公開後は動画の再生、全画面表示、表示幅、ConsoleやNetworkのエラーまで確認しましょう。