本文へスキップ

YouTube埋め込みコードの取得方法と実装テクニック（通常動画・Shorts対応）

26 min read

YouTube動画の埋め込みは、コードを貼って終わりにはなりません。Shortsは取得の手順が通常動画と違いますし、そのまま貼るとスマホで表示が崩れます。

通常動画の埋め込みコード取得手順

通常動画（横長の動画）の場合です。PCのブラウザから操作します。

Step 1：動画ページを開く

YouTubeにアクセスし、埋め込みたい動画のページを開きます。URLバーに youtube.com/watch?v=〇〇〇 と表示されていれば通常動画です。

Step 2：「共有」ボタンをクリック

動画タイトルの下に並んでいる「共有」ボタンをクリックします。矢印のアイコンが目印です。ボタンが見当たらない場合は、同じ行の右端にある「…（その他の操作）」の中にあります。

YouTubeの動画ページ。タイトルの下に並ぶボタンの中に共有がある

Step 3：「埋め込む」を選択

共有パネルが表示されたら、左上にある「埋め込む」をクリックします。英語表示の場合は 「Embed」 です。

YouTubeの共有パネル。左上にある埋め込むを選ぶ

Step 4：iframeコードをコピー

以下のようなiframeコードが表示されます。右下の「コピー」ボタンを押すと、コードを取得できます。

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

これが埋め込みの基本コードです。VIDEO_ID の部分に動画固有のIDが入ります。

この埋め込みコードには、固定の width と height が最初から入っています。16:9のアスペクト比（画面の縦横比）ですが、そのまま貼るとレスポンシブに対応できません。あとで出てくるCSS対応とセットで使います。

動画の埋め込みダイアログ。iframeのコードとコピーボタンが並んでいる

YouTube Shortsの埋め込みコード取得手順

最近はShortsをサイトに埋め込みたいという依頼も増えてきました。通常動画とは取得方法が少し異なります。

重要：Shortsの埋め込みコードはスマホアプリからは取得できません。必ずPCのブラウザ（Chrome・Safari等）から操作してください。

右クリックメニューから取る

PCのブラウザでYouTubeを開き、埋め込みたいShortsを表示します。URLバーが youtube.com/shorts/〇〇〇 になっていればShortsです。

ここからが通常動画と違うところで、「共有」ボタンは使いません。動画プレイヤーの上にカーソルを合わせて右クリックし、出てきたメニューの「埋め込みコードをコピー」を選びます。英語表示なら 「Copy embed code」 です。

コピーされたコードが以下のような形になっていれば成功です。

<iframe width="315" height="560"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

通常動画と比べて、width と height の値が逆になっています（縦長）。Shortsは9:16の縦長フォーマットです。

YouTube Shortsのプレイヤーを右クリックしたメニュー。埋め込みコードをコピーを選ぶ

埋め込みコードのカスタマイズ方法

YouTubeの埋め込みコードは、src のURLにパラメータを追加すると動作を変えられます。

よく使うパラメータ一覧

  • autoplay=1 にすると、ページを開いたときに自動で再生が始まります
  • mute=1 は、ミュート（消音）状態での再生です
  • controls=0 を指定すると、再生バーなどのコントロールUIが非表示になります
  • rel=0 は、再生終了後の関連動画を同じチャンネル内に限定するパラメータです
  • start=30 のように秒数を指定すると、その秒数から再生が始まります
  • loop=1 で動画をループ再生できます。playlist パラメータもあわせて必要です
  • modestbranding=1 は、YouTubeロゴを小さく表示します

パラメータの書き方

パラメータは、src のURLの末尾に ? で始め、複数指定する場合は & でつなぎます。

<!-- 自動再生＋ミュート＋関連動画を制限 -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&rel=0"
  frameborder="0"
  allow="autoplay"
  allowfullscreen>
</iframe>
  • autoplay=1 を使う場合は mute=1 をセットにします。ブラウザのポリシーで、音声付き自動再生はブロックされるためです
  • autoplay=1 を指定したら、allow="autoplay" 属性もiframeに追加する
  • rel=0 は「関連動画を完全に消す」のではなく「同チャンネルの動画に限定する」という意味

実案件で使う設定パターン

僕がよく使う組み合わせです。コピーしてそのまま使えます。

<!-- パターン1：コーポレートサイト向け（関連動画制限＋控えめUI） -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1"
  frameborder="0"
  allowfullscreen>
</iframe>

<!-- パターン2：LP向け（自動再生＋ミュート＋ループ） -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=0&rel=0"
  frameborder="0"
  allow="autoplay"
  allowfullscreen>
</iframe>

loop=1 は playlist=VIDEO_ID とセットです。片方だけだとループしません。

レスポンシブ対応の実装方法

YouTubeの埋め込みコードをそのまま貼ると、width と height が固定値になっています。そのため、スマホで見たときにはみ出したり、余白ができたりします。CSS側でのレスポンシブ対応がセットになります。

通常動画（16:9）のレスポンシブ対応

現在もっともシンプルな方法は、CSSの aspect-ratio を使う方法です。アスペクトレシオ（縦横比を指定するプロパティ）という意味です。

<!-- HTML -->
<iframe class="youtube-embed"
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0"
  frameborder="0"
  allowfullscreen>
</iframe>
/* CSS */
.youtube-embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

これで親要素の幅に合わせて、16:9の比率を保ったまま伸び縮みします。HTMLの width height 属性は削除してOKです。

Shorts（9:16）のレスポンシブ対応

Shortsは縦長なので、aspect-ratio の値を変えるだけとはいきません。幅いっぱいに表示すると縦が長くなりすぎるため、max-width で幅も制限します。

<!-- HTML -->
<iframe class="youtube-shorts"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>
/* CSS */
.youtube-shorts {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 9 / 16;
}
  • max-width: 360px でスマホ画面幅程度に制限し、PC表示で巨大にならないようにする
  • aspect-ratio: 9 / 16 で縦長の比率を維持する
  • 中央寄せにしたい場合は、親要素に text-align: center を指定します。もしくは、iframe自体に margin: 0 auto; display: block; を追加します

aspect-ratioが使えない場合の代替手段

aspect-ratio は主要ブラウザでは問題なく動きます。ただ、古いブラウザのサポートが必要な案件もあります。僕はそういうときは、padding-top を使った従来の方法に切り替えています。

/* 従来の方法（padding-topハック） */
.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9÷16 = 0.5625 = 56.25% */
}

.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

この計算式の意味が分からなくても、コードをそのままコピーすれば問題なく動きます。

56.25% は 16:9 の場合の値です。Shortsの 9:16 なら 177.78%（16÷9）になります。この場合は、先ほどのように max-width で制限する方が実用的です。

YouTube埋め込みがスマホで崩れる場合とaspect-ratioで収まる場合の比較

実装時に押さえておきたい注意点

表示速度への影響とlazy loading

YouTubeのiframeは、読み込み時にかなりのリソースを使います。特にファーストビュー（画面に最初に映る範囲）の外に動画がある場合は、遅延読み込みが有効です。loading="lazy" を指定します。

<iframe class="youtube-embed"
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0"
  frameborder="0"
  loading="lazy"
  allowfullscreen>
</iframe>

これだけで、動画がスクロールして画面内に入るまで読み込みが始まらなくなります。動画を複数埋め込むページほど、初期表示が速くなります。

プライバシー強化モードの活用

YouTubeの埋め込みにも用意されている「プライバシー強化モード」。ドメインを youtube.com から youtube-nocookie.com に変えるだけで有効になります。

<!-- 通常 -->
src="https://www.youtube.com/embed/VIDEO_ID"

<!-- プライバシー強化モード -->
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"

プライバシー強化モードでは、ユーザーが動画を再生するまでCookieが保存されません。トラッキング用のCookie（閲覧情報を記録する仕組み）が対象です。プライバシーポリシーに配慮が必要なサイトでは、この設定を標準にしています。

title属性の追加

iframeには title 属性も追加します。無くても動画は再生されるので、忘れやすいところです。

<iframe class="youtube-embed"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0"
  title="会社紹介動画"
  frameborder="0"
  loading="lazy"
  allowfullscreen>
</iframe>

title 属性は、スクリーンリーダー（音声読み上げソフト）がiframeの内容をユーザーに伝えるために使います。アクセシビリティ（誰でも使いやすいWebにするための配慮）の観点から、動画の内容を簡潔に書いておきます。

クライアントへの説明ポイント

実装が完了したら、クライアントに以下の点を伝えておくとトラブルを防げます。

  • YouTube側で動画を削除・非公開にすると、サイト上の埋め込みも表示されなくなること
  • 動画のタイトルやサムネイルはYouTube側の設定に依存するため、サイト側では変更できないこと
  • 新しい動画に差し替えたい場合は、動画IDの部分を入れ替える必要があること。テキストや画像のように簡単に差し替えできるものではありません

おわりに

通常動画もShortsも、埋め込みコードの取得自体は数クリックで終わります。ただ、レスポンシブ対応まで含めると、案件によって調整が必要な場面もあると思います。

僕は loading="lazy" と aspect-ratio の2つだけは、どの案件でも必ず入れるようにしています。この2つだけでも、次の実装でぜひ試してみてください！

RELATED

CATEGORY

Contact

お気軽にご相談ください

X（Twitter）のDM、もしくは本サイトのCONTACTページからご連絡ください。
24時間以内に返信しますので、些細なことでもお気軽にご相談ください。

制作実績を見る Xでのお問い合わせ CONTACTページはこちら