YouTube動画をWebサイトに埋め込む方法とよく使うパラメーター

YouTubeの動画をサイトに載せたいとき、埋め込みコードをそのまま貼り付けると、スマホで画面からはみ出したり、動画が増えるほどページの表示が遅くなったりすることがあります。コードの取得から見た目や読み込みの調整までを押さえておけば、どちらも数行のHTMLとCSSで解決できます。

YouTube動画の埋め込みコードを取得する

埋め込みコードは、YouTubeの動画ページから取得できます。

1. 埋め込みたい動画のページを開く
2. 動画の下にある「共有」をクリック
3. 表示された画面の「共有」の並びから「埋め込む」を選ぶ
4. 右側に表示されたコードを「コピー」する

コードの下にある「埋め込みオプション」では、再生を始める位置やプレーヤーのコントロールを表示するかどうか、プライバシー強化モード(後述)を使うかどうかを選べます。チェックを切り替えると、コードの内容も変わります。

この画面の下には「YouTube 動画をご自分のサイトに埋め込むと、YouTube API 利用規約に同意したことになります」と書かれています。埋め込み自体は誰でも自由にできますが、YouTubeの規約に沿った使い方が前提になっている点は覚えておきましょう。

コピーしたコードは、次のような<iframe>タグになっています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?si=xxxxxxxx" 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の?si=以降は共有元を識別するためのパラメーターで、削除しても再生に影響はありません。

titleは初期値が「YouTube video player」になっているので、どの動画かわかる名前に書き換えておくと親切です。alt属性と同じように、読み上げで内容が伝わるようにするためのものです。

HTMLやWordPressに貼り付ける

HTMLに直接書く場合

コピーしたコードを、動画を表示したい位置にそのまま貼り付けます。

後でCSSで大きさを調整しやすいように、<div>などで囲んでおくと扱いやすくなります。

WordPressの場合

WordPressのブロックエディターでは、埋め込みコードを使わなくても、動画のURLを貼り付けるだけで自動でYouTubeのプレーヤーに変換されます。

これはoEmbed（URLから埋め込み用のHTMLを自動で取得するしくみ）という機能で、YouTubeのほかにもVimeoやTikTokなどの動画サービスに対応しています。

URLでの埋め込みは手軽ですが、パラメーターを細かく指定したい場合は「カスタムHTML」ブロックに埋め込みコードを貼り付けます。

再生リストやショート動画を埋め込む

再生リスト

再生リストのページで「共有」→「埋め込む」を選ぶと、再生リスト用の埋め込みコードを取得できます。srcは次のような形になります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=再生リストID" title="〇〇の再生リスト" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

list=の後ろの再生リストIDは、再生リストのURL(https://www.youtube.com/playlist?list=〇〇)からも確認できます。

ショート動画

ショート動画は、「共有」ボタンを押しても「埋め込む」の項目がありません。パソコンで動画の上を右クリックして、表示されたメニューから「埋め込みコードをコピー」を選ぶと、埋め込みコードを取得できます。

コードの形は通常の動画と同じで、width="320" height="560"のような縦長のサイズになっています。サイトのレイアウトに合わせて、後述のCSSで縦長の比率のまま大きさを調整します。

パラメーターで再生のしかたを変える

srcのURLの後ろに?名前=値の形でパラメーターを付けると、再生のしかたを変えられます。複数指定するときは&でつなぎます。

<iframe src="https://www.youtube.com/embed/動画ID?start=30&end=90&rel=0" ...></iframe>

よく使うパラメーターは次のとおりです。

出典：YouTube Embedded Players and Player Parameters(Google for Developers)

自動再生はミュートとセットで指定する

autoplay=1だけを指定しても、多くのブラウザでは自動再生されません。ChromeやSafariなどのブラウザには、音声付きの動画が勝手に再生されないようにする制限があるためです。ミュートの状態であれば自動再生が許可されるので、mute=1も一緒に指定します。

<iframe src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1&playsinline=1" ...></iframe>

スマホでも自動再生させたい場合は、playsinline=1も付けておくと、全画面に切り替わらずにページ内で再生されます。

なお、YouTubeのヘルプによると、自動再生された埋め込み動画の再生は視聴回数にカウントされません。

1本の動画をループ再生する

loop=1は、単体の動画にはそのままでは効きません。playlistパラメーターに同じ動画IDを指定して、1本だけの再生リストとして扱う必要があります。

<iframe src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1&loop=1&playlist=動画ID" ...></iframe>

rel=0でおすすめ動画を非表示にはできない

以前はrel=0で再生後のおすすめ動画(関連動画)を表示しないようにできましたが、2018年9月25日以降は、同じチャンネルの動画がおすすめとして表示されるように変わっています。おすすめ動画をまったく表示しない設定はありません。

今は使えないパラメーター

古い記事では、YouTubeのロゴを目立たなくするmodestbranding=1や、タイトルを非表示にするshowinfo=0が紹介されていることがあります。これらはすでに廃止されていて、指定しても効果はありません(modestbrandingは2023年8月15日に廃止)。

画面幅に合わせてレスポンシブにする

埋め込みコードはwidth="560" height="315"のように大きさが固定されているので、そのままだとスマホで画面からはみ出したり、パソコンでは小さく表示されたりします。

CSSのaspect-ratioプロパティを使うと、幅に合わせて高さも16:9の比率で自動的に変わるようになります。

.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

ショート動画の場合は、比率を縦長の9:16にして、最大幅を決めておきます。

.video-short iframe {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 9 / 16;
}

.video-short iframe {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 9 / 16;
}

以前は、padding-top: 56.25%で比率を保った親要素の中に、position: absoluteでiframeを重ねる方法がよく使われていました。aspect-ratioは現在の主要なブラウザで使えるので、特別な理由がなければこちらのほうがシンプルに書けます。

なお、YouTubeのプレーヤーは200×200px以上の大きさで表示する必要があります。小さく表示しすぎると、コントロールが正しく表示されなくなるので注意しましょう。

ページの表示速度への影響を抑える

YouTubeの埋め込みは、1本でもプレーヤーを表示するためのファイルをたくさん読み込みます。動画が多いページや、ファーストビューに動画があるページでは、表示速度が遅くなる原因になりやすいです。

loading=”lazy”で読み込みを遅らせる

画面の下のほうにある動画は、iframeにloading="lazy"を付けると、画面に近づくまで読み込みが始まらなくなります。

<iframe src="https://www.youtube.com/embed/動画ID" loading="lazy" ...></iframe>

WordPressでは、widthとheightが指定されているiframeに、自動でloading="lazy"が付くようになっています(WordPress 5.7以降)。URLを貼り付けて埋め込んだYouTube動画も対象です。

ファサードでクリックされるまでプレーヤーを読み込まない

もうひとつの方法が、ファサード(本物のプレーヤーに見た目を似せた軽い代わりの表示)を使う方法です。最初はサムネイル画像と再生ボタンだけを表示しておき、クリックされたときに初めてYouTubeのプレーヤーを読み込みます。PageSpeed Insightsの「インサイト」にある「サードパーティ」の項目に、YouTubeの読み込みが大きく表示されている場合に試したい方法です。

YouTube用のファサードとしてよく使われているのが「lite-youtube-embed」です。CSSとJavaScriptを読み込んで、iframeの代わりに<lite-youtube>タグを書きます。

<lite-youtube videoid="動画ID" params="start=30&rel=0"></lite-youtube>

<lite-youtube videoid="動画ID" params="start=30&rel=0"></lite-youtube>

ファサードを使うと、クリックされるまではプレーヤーの機能が使えないので、自動再生させたい動画には向いていません。また、スマホでは再生ボタンを押してからもう一度タップが必要になることがあります。

出典：Lazy load third-party resources with facades(Chrome for Developers)

プライバシー強化モードで埋め込む

埋め込みオプションで「プライバシー強化モードを有効にする」にチェックを入れると、srcのドメインがwww.youtube.comからwww.youtube-nocookie.comに変わります。

<iframe src="https://www.youtube-nocookie.com/embed/動画ID" ...></iframe>

<iframe src="https://www.youtube-nocookie.com/embed/動画ID" ...></iframe>

埋め込み画面のヘルプには「ウェブサイトを訪れたユーザーが動画を再生しない限り、ユーザーに関する情報は YouTube に保存されません」と説明されています。また、埋め込まれた動画を見た人の視聴情報は、その人のYouTubeのおすすめなどにも使われなくなります。サイトのプライバシーポリシーの関係で、訪問者の情報がなるべくYouTube側に送られないようにしたい場合に使います。

見た目や使い方は通常の埋め込みと変わりませんが、「再生しない限り」とあるとおり、訪問者が再生を始めた後は情報が送られる点には注意が必要です。

埋め込んだ動画が再生されないときに確認すること

動画が再生されない原因はYOTUBEのアップロードに原因

動画の埋め込みが許可されているか

動画の投稿者がYouTube Studioで「埋め込みを許可する」のチェックを外していると、その動画はほかのサイトで再生できず、「他のウェブサイトでの再生は、動画の所有者によって無効にされています」と表示されます。自分の動画であれば、YouTube Studioの「コンテンツ」から動画の詳細画面を開き、「すべて表示」の中にある設定を確認します。

また、非公開の動画は埋め込めません。一般には公開せずにサイトでだけ見せたい場合は、限定公開にします。

「エラー153」と表示される場合

プレーヤーに「動画プレーヤーの設定エラー」「エラー 153」と表示される場合は、リファラーが送られていないことが原因です。YouTubeの埋め込みプレーヤーは、どのサイトから読み込まれたかをリファラーで確認するようになっていて、これが送られないと再生できません。

埋め込みコードのreferrerpolicy="strict-origin-when-cross-origin"を削除していないか、サーバーやセキュリティ系のプラグインでReferrer-Policyをno-referrerやsame-originに設定していないかを確認しましょう。YouTubeはstrict-origin-when-cross-originを推奨しています。

出典：Required Minimum Functionality(YouTube API Services)

自動再生されない場合

autoplay=1だけを指定している場合は、mute=1を追加します。また、iframeのallow属性からautoplayを削除していると、自動再生が許可されません。

YouTube以外の動画を埋め込む場合

Vimeoなどほかの動画サービスも、多くは「共有」や「埋め込み」のメニューからiframeのコードを取得でき、貼り付け方やCSSでのレスポンシブ対応はYouTubeと同じ考え方で対応できます。パラメーターの名前や使える機能はサービスごとに違うので、各サービスのヘルプで確認してください。

動画ファイルを自分のサーバーに置いて表示したい場合は、<video>タグを使います。詳しくは「HTMLで動画を埋め込むvideoタグの使い方」で紹介しています。Instagramの投稿を埋め込みたい場合は「Instagramの投稿をWordPressサイトに埋め込む」を参考にしてください。