YouTube動画をブログ・サイトに埋め込む方法｜オプション設定とエラーの対処
YouTube動画は、共有メニューの埋め込みコードを貼るだけでブログやサイトに表示できます。コードの取り方とWordPressへの貼り方から、開始位置・自動再生・ループなどのオプション、スマホ対応、エラー153などのトラブル対処、途中から再生されるリンクまでを解説します。
ブログやWebサイトでYouTube動画を紹介するなら、ページの中で直接再生できる埋め込みが便利です。埋め込みコードは共有メニューから数クリックで取得できますが、「途中から再生したい」「スマホで画面からはみ出す」「エラーが出て再生できない」といった場面では少し知識が必要です。この記事では、コードの取り方から便利なオプション、スマホ対応、トラブルの対処までを順に解説します。
公式の埋め込みコードを取得する
埋め込みコードは、動画ページの共有メニューから取得します（画面の名称や配置は変わることがあります）。
- 埋め込みたい動画をYouTubeで開きます。
- 動画の下にある「共有」をクリックします。
- 共有先の一覧から「埋め込む」を選びます。
- 表示されたコード（<iframe>で始まるHTML）をコピーします。
コピーされるコードは、おおむね次のような形です（「動画ID」には動画ごとに決まった英数字が入ります）。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/動画ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>srcは動画のURL、widthとheightは表示サイズ、allowは自動再生などプレーヤーに許可する機能、allowfullscreenは全画面表示の許可です。referrerpolicy="strict-origin-when-cross-origin"は後述するエラー153を防ぐうえで大切なので、コードを整えるときにも消さないようにしましょう。動画IDは、動画URLの「watch?v=」に続く英数字です。
WordPressやブログに貼り付ける方法
WordPressのブロックエディタでは、次の2つの方法があります。
| 方法 | やり方 | 向いている場面 |
|---|---|---|
| 「YouTube」埋め込みブロック | ブロックを追加し、動画のURLを貼るだけ | 動画をそのまま見せたいとき |
| 「カスタムHTML」ブロック | 埋め込みコード（iframe）をそのまま貼る | 開始位置やループなどを細かく設定したいとき |
URLを貼るだけの方法では細かいオプションが反映されないことがあるため、開始位置やループなどを使いたい場合は、調整したコードをカスタムHTMLブロックに貼りましょう。ほかのブログサービスでも同様の方法が使えることが多いですが、iframeが制限されている場合もあるので各サービスのヘルプを確認してください。
よく使うオプション（パラメータ）一覧
srcのURLの末尾に「?」を付けてパラメータを書くと、再生のしかたを指定できます。複数指定するときは「&」でつなぎます（URLにすでに「?」がある場合も「&」）。次は、1分23秒から2分まで再生し、関連動画を同じチャンネルのものにする例です。
https://www.youtube.com/embed/動画ID?start=83&end=120&rel=0| パラメータ | 意味 | 例 |
|---|---|---|
| start | 再生を始める位置（秒） | start=83（1分23秒から） |
| end | 再生を止める位置（秒） | end=120（2分で停止） |
| autoplay | 読み込み時に自動再生 | autoplay=1&mute=1 |
| mute | ミュートした状態で開始 | mute=1 |
| loop | 最後まで再生したら繰り返す | loop=1&playlist=動画ID |
| controls | 操作パネルを非表示にする | controls=0 |
| rel | 関連動画を同じチャンネルの動画にする | rel=0 |
| cc_load_policy | 字幕を最初から表示（字幕がある場合） | cc_load_policy=1 |
| playsinline | iPhoneで全画面にせずページ内で再生 | playsinline=1 |
startとendは秒で指定します。1分23秒なら60＋23で83、1時間2分5秒なら3600＋120＋5で3725です。rel=0は、2018年の変更以降、関連動画を完全には消せず、同じチャンネルの動画が表示されます。他チャンネルの動画を避けたい場合には有効ですが、何も表示しない設定ではない点に注意しましょう（いずれもYouTubeの案内による目安。仕様は変わることがあります）。
手で書くのが面倒なときは、YouTube埋め込みコード生成ツールが便利です。動画のURLを入れて、開始・終了時間、自動再生（ミュートを自動で付加）、ループ、プライバシー強化モード、レスポンシブ（16:9・4:3・9:16）などを選ぶだけでコードを作成でき、プレビューで動きも確かめられます。
自動再生とループを使うときの注意
- 自動再生はミュートとセットで：多くのブラウザは音声付きの自動再生を止めるため、autoplay=1だけでは再生されないことがあります。mute=1と組み合わせ、iframeのallowに「autoplay」が含まれているかも確認しましょう（公式コードには含まれています）。
- ループにはplaylistも指定する：1本の動画をループさせるには、loop=1に加えてplaylist=に同じ動画IDを指定します。
- 読者の体験を優先する：開いた瞬間に動き出す動画は読者を驚かせることがあります。自動再生は必要な場面に絞りましょう。
開始・終了位置とループを組み合わせたときなどの動きは環境によって異なる場合があるので、公開前にパソコンとスマホで確かめておくと安心です。なお、自分で特定の区間を繰り返し見たいだけなら、埋め込みを作らなくてもYouTubeリピート再生ツールで区間ループができます。
スマホでもはみ出さないレスポンシブ表示にする
公式コードは大きさが固定されているため、画面の狭いスマホでは動画がはみ出すことがあります。画面の幅に合わせて伸び縮みさせるには、iframeにstyle属性を追加します。
<iframe ... style="width:100%; aspect-ratio:16/9; height:auto"></iframe>width:100%で横幅を親要素いっぱいに広げ、aspect-ratioで高さを比率どおりに保ちます（width・height属性は残したままで構いません）。比率は、横長の動画なら16/9、昔のテレビサイズなら4/3、縦長のショート動画なら9/16です。ショート動画は縦に大きくなりすぎることがあるので、max-width:360pxのように最大幅も指定すると見やすく収まります。
プライバシー強化モードで埋め込む
YouTubeには、視聴者のプライバシーに配慮したプライバシー強化モードでの埋め込みも用意されています。srcのドメインを「www.youtube.com」から「www.youtube-nocookie.com」に変えるだけで使えます。
src="https://www.youtube-nocookie.com/embed/動画ID"読者のプライバシーにできるだけ配慮したい場合に検討するとよいでしょう。パラメータも基本的には同じように付けられます。ただし、動画そのものはYouTubeから配信されるため、外部サービスを利用していることに変わりはありません。詳細はYouTubeの案内で確認し、サイトのプライバシーポリシーにも埋め込みコンテンツについて記載しておくと安心です。
表示されない・エラーになる時の確認点
動画が表示されない・再生できないときは、次の点を確認してください。
| 症状 | 考えられる原因 | 確認・対処 |
|---|---|---|
| 「エラー153（動画プレーヤーの設定エラー）」と出る | ページがRefererを送らない設定になっている | referrerpolicyの属性を残し、サイト全体の設定も確認する（下記） |
| プレーヤーは出るが再生できない | 動画の所有者が埋め込みを許可していない可能性 | YouTube上で見てもらうリンクに切り替える |
| 再生できない旨の表示が出る | 動画が非公開や削除済みになっている | 動画のURLを開いて公開状態を確認する |
| 何も表示されない | コードの一部が欠けている、またはブログ側でiframeが除去された | コードを貼り直し、HTMLを使える場所か確認する |
エラー153が出る場合
エラー153は、ページがReferer（どのページから読み込まれたかを示す情報）を送らない設定になっている場合に起きることがあります。次の場所を確認してください。
- iframeに
referrerpolicy="no-referrer"と書いていないか。あれば公式コードのreferrerpolicy="strict-origin-when-cross-origin"に戻します。 - サーバーの設定（.htaccessなど）やセキュリティ系のプラグインで、サイト全体に
Referrer-Policy: no-referrerが指定されていないか。 - HTMLのmetaタグでリファラーの扱いを指定している場合、no-referrerになっていないか。
コードを整理しようとして属性を削った結果、このエラーが出ることもあります。公式コードの属性はそのまま残すのが安全です。また、パソコンに保存したHTMLファイルを直接開いて試すと同じエラーになることがあるため、動作確認はWebサーバー上のページで行いましょう。
途中から再生されるリンクの作り方
特定の場面から再生が始まるリンクを共有したいときは、動画のURLに「t=」を付けます。
| リンクの形 | 例（1分23秒から再生） |
|---|---|
| 短縮URL（秒で指定） | https://youtu.be/動画ID?t=83 |
| 通常のURL（分と秒で指定） | https://www.youtube.com/watch?v=動画ID&t=1m23s |
いちばん簡単なのは、見せたい位置で動画を一時停止し、「共有」を開いて「開始位置」にチェックを入れる方法です。埋め込みのstartは秒のみ、共有リンクのtは秒または「1m23s」の形と書き方が違うので注意しましょう。YouTube埋め込みコード生成ツールでは、こうした時間指定リンクも作れます。動画の中の場面を探しやすくしたいなら、YouTubeチャプターの付け方もあわせてご覧ください。
YouTubeの埋め込みは、「公式コードを取得する」「必要なパラメータを付ける」「スマホ向けに幅を可変にする」という流れで考えると整理しやすくなります。本記事は執筆時点の一般的な情報です。仕様は変更されることがあるため、最新の情報はYouTubeの公式ヘルプなどでご確認ください。
よくある質問
YouTube動画の埋め込みコードはどこで取得できますか？
動画の下にある「共有」をクリックし、「埋め込む」を選ぶと、<iframe>で始まる埋め込みコードが表示されます。これをコピーして、サイトのHTMLやWordPressのカスタムHTMLブロックに貼り付けます。
埋め込んだ動画を途中から再生させるには？
埋め込みコードのsrcのURLに「?start=83」のように開始位置を秒で付けます。1分23秒なら83です。止める位置はendで指定でき、「?start=83&end=120」のように&でつなぎます。
埋め込み動画が自動再生されないのはなぜですか？
多くのブラウザが音声付きの自動再生を止めるためです。autoplay=1にmute=1を組み合わせ、ミュートした状態で再生させるのが基本です。iframeのallow属性にautoplayが含まれているかも確認してください。
rel=0で関連動画を完全に消せますか？
消せません。2018年の変更以降、rel=0を指定しても関連動画は完全には非表示にならず、同じチャンネルの動画が表示されます。他チャンネルの動画を表示させたくない場合には有効です。
「エラー153」と表示されて再生できません。どうすればよいですか？
ページがReferer（どのページから読み込まれたかを示す情報）を送らない設定になっていると起きることがあります。公式コードのreferrerpolicy="strict-origin-when-cross-origin"を消していないか、サイト全体やプラグインの設定でReferrer-Policyがno-referrerになっていないかを確認してください。