YouTubeの再生リスト・チャンネルをホームページに埋め込む方法|公式コードの限界とCookieの実測【2026年版】

YouTubeの再生リストは、公式の埋め込みコードでそのままホームページに表示できます。ところが「チャンネルに動画を追加したら、サイト側の動画一覧も自動で増えていく」という形の公式埋め込みは存在しません。さらに、プライバシー対策として必ず紹介されるyoutube-nocookie.comが、訪問者が再生ボタンを押す前に実際は何を保存しているのか。まっさらなChromeプロファイルを2つ用意し、DevToolsを開いた状態で数えました。名前から受ける印象とは違う結果です。本記事はその実測値から出発して、再生リスト・チャンネル・個別動画をページ速度を犠牲にせず表示する方法を順に解説します。

※本記事の検証内容とスクリーンショットは2026年8月時点のものです。

先に結論

  • 再生リストの埋め込みは公式コードで完結します。YouTubeの「共有」から「埋め込む」でiframeを取得すれば、そのまま動きます。無料で、追加のツールも要りません。
  • チャンネルの動画一覧を自動更新で表示する公式の方法はありません。新しい動画が自動的にサイトに並ぶ形にしたい場合は、集約ツールが必要になります。
  • youtube-nocookie.comはCookieゼロではありませんでした。訪問者が何もしていない時点で、標準の埋め込みと同じ名前の.google.comのCookieを3つ書き込みます。消えるのはYouTube側の5つです。

正しく設置できた埋め込み動画は、サイトの内容を自動的に新しく保ち、訪問者が実際に見たいと思う素材を提供し、動画の構造化データを付ける価値のあるページを作り、その分野の情報源としてのブランドの位置づけを強めます。ただしその前に、YouTubeの埋め込みが訪問者のブラウザに対して何をするのかを知っておく価値があります。この数値を公開している人が見当たらなかったので、自分で測りました。

公式の埋め込みでできること、できないこと

再生リストを1か所に置きたいだけで、デザインの自由度が問題にならないのであれば、YouTube自身の埋め込みで十分ですし、費用もかかりません。方法は2つあります。

再生リストの公式埋め込みコード(もっとも簡単)

YouTubeは再生リスト用の基本的な埋め込みコードをプラットフォーム上で配布しています。目的の再生リストを開き、「共有」から「埋め込む」を選んで、表示されたiframeコードをコピーするだけです。これで再生リストのプレーヤーがすぐに動きます。

コードは次のような形です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

PLAYLIST_ID の部分は、自分の再生リストのIDに置き換えてください。YouTubeのURLの list= 以降にあります。本記事の後半のCookie実測を踏まえると、筆者ならこのsrcのドメインをyoutube-nocookie.comに差し替えます。プレーヤーは同じで、同意を取る前に書き込まれる識別子が5つ減ります。

長所: 無料、すぐ使える、外部サービスに依存しない、YouTube公式のサポート対象。

短所: カスタマイズがほとんどできない(YouTube標準のプレーヤーの見た目のまま)、パフォーマンスへの影響(遅延読み込みが組み込まれていない)、レスポンシブ対応のために幅と高さを手作業で調整する必要がある。そしてチャンネルのフィードを埋め込む公式機能はそもそも存在しません。サイトを自動的に更新してほしいチャンネルには、集約ツールが必要です。

レスポンシブなCSSラッパー(こちらのほうが実用的)

公式の埋め込みを画面サイズに応じて自動調整させるには、iframeを16対9のアスペクト比で固定したコンテナで囲みます。

<div class="video-container"> <iframe src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID" frameborder="0" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> <style> .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

これで、スマートフォン・タブレット・デスクトップのいずれでもサイズを手で直さずに収まります。iframeには loading="lazy" を付けておくと表示速度に効きます。

集約ツールがYouTubeとつながるのは、iframeプレーヤーではなく YouTube Data API v3 経由です。チャンネルのフィード、モデレーション、独自デザインが可能になるのはそのためです。自分でこのAPIに対して実装する場合は、後述のクォータの注意点に気をつけてください。

インターネット上のどのガイドも、プライバシー対策としてyoutube-nocookie.comを使うように書いています。そこで、標準のyoutube.comの埋め込みを載せたページと、youtube-nocookie.comの埋め込みを載せたページを2つ用意し、それぞれ拡張機能のないまっさらなChromeプロファイルで開いて、動画に一切触れない状態でDevToolsのApplicationパネルに現れるものを数えました。

検証条件: Chrome 150.0.7871.187(arm64)、macOS 26.4.1、2026年8月6日。テストごとに新規プロファイルを用意、拡張機能ゼロ、ページはlocalhostから配信、再読み込みは一切なし。シークレットモードは使っていません。シークレットではサードパーティCookieの挙動が変わり、答えがずれてしまうからです。

結果

初回読み込み時点、動画には触れていない状態のCookieです。

Cookieのドメインyoutube.comの埋め込みyoutube-nocookie.comの埋め込み
.youtube.com5個0個
.google.com3個3個

プライバシー強化版の埋め込みは、Cookieフリーではありません。訪問者が何もしないうちに、Googleの3つのCookieを書き込みます。標準の埋め込みが書き込むものと、名前まで同じ3つです。取り除かれるのはYouTube層のほうで、.youtube.comの識別子はまるごと存在しません。

標準のyoutube.com埋め込みが再生前に書き込んだ8つのCookieをChrome DevToolsのApplicationパネルで表示した画面。.youtube.comが5つ、.google.comが3つ
標準のyoutube.com埋め込み、初回読み込み、動画は未再生。埋め込みフレームのCookieストアに8行が並ぶ。.youtube.comの識別子が5つと.google.comのCookieが3つで、多くは2027年まで有効。
youtube-nocookie.comの埋め込みフレームに.google.comのCookieが3つだけ表示され、.youtube.comのCookieが存在しないChrome DevToolsの画面
同じ検証をyoutube-nocookie.comの埋め込みで、別の新規プロファイルで実施。埋め込みフレームに残るのは.google.comのCookie3つだけで、.youtube.comの行は1つもない。

動画を再生しても、どちらの埋め込みでも変化はありませんでした。それぞれ再生したうえでパネルを更新しましたが、セッションIDに至るまで値は再生前と同一でした。それぞれの埋め込みが書き込むものは、読み込みの時点で書き込まれています。

動画を再生中の状態で、同じ8つのCookieが同じ値のまま表示されているChrome DevToolsの画面
標準の埋め込みの再生中。8行の顔ぶれも値も再生前と同じ。再生によって増えたものはなく、すべて最初のクリック前に書き込まれていた。

消える5つ

標準の埋め込みが操作前に設定し、nocookieの埋め込みには一度も現れなかったものです。

  • __Secure-ROLLOUT_TOKEN
  • __Secure-YNID
  • VISITOR_INFO1_LIVE
  • VISITOR_PRIVACY_METADATA
  • YSC

YSC 以外はいずれも2027年までの有効期限が設定されています。YSC はセッション単位です。

残る3つ

どちらの埋め込みも、.google.comに次を設定します。

  • __Secure-STRP
  • NID
  • SEARCH_SAMESITE

新規プロファイルのそれぞれで、NID は新しく発行された値で届きました。以前の訪問の残りではありません。

標準のyoutube.com埋め込みが再生前に設定した3つの.google.com CookieをChrome DevToolsのApplicationパネルで一覧表示した画面
標準の埋め込みが再生前に設定する.google.comのCookie3つ。__Secure-STRP、NID、SEARCH_SAMESITE。
youtube-nocookie.comの埋め込みが再生前に同じ3つの.google.com Cookieを設定していることを示すChrome DevToolsの画面
プライバシー強化版でも、同じ名前・同じドメインの3つが並ぶ。nocookieという名称がカバーしていないのはこの部分。

数え方についての補足

ChromeのApplicationパネルはCookieをフレーム単位でまとめるため、同じCookieが複数のノードに現れることがあります。標準の埋め込みのテストを2回走らせたところ、__Secure-STRP がどこに分類されるかによってフレーム合計は7行と8行で揺れましたが、ドメインごとの数は毎回同じでした。.youtube.comが5つ、.google.comが3つです。再現できる測定値はドメインごとの内訳なので、本記事はそちらを報告しています。

主張しないこと

標準の埋め込みの.youtube.com Cookieには、Chrome上でパーティションキーが表示されます。つまり埋め込み先のサイトにスコープが限定されており、訪問者をウェブ全体で追跡できる形にはなっていません。ですから「再生を押す前からYouTubeがインターネット中であなたを追跡している」という話ではありません。確認したうえで、誇張はしません。

また、Cookieの一覧だけを見て、この3つのGoogle Cookieが埋め込み由来なのか、それともブラウザ全体の別のGoogleとのやり取り由来なのかを証明することはできません。言えるのは、ホストページ自身は何も設定していないこと、プロファイルは新規だったこと、そして埋め込みがそのページ上の唯一のサードパーティコンテンツだったことです。

埋め込み動画を再生中でも、ホストページ自身のCookieストアが完全に空であることを示すChrome DevToolsの画面
対照群としてのホストページ自身のCookieストア。どちらのテストでも再生前後を通して空のまま。上で数えたものはすべて埋め込みから来ている。

自分のサイトにとっての意味

Cookie同意バナーを出しているページであれば、訪問者がそれを読んでいる時点で、標準の埋め込みはすでに8つのCookieを書き込み終えています。nocookieに切り替えるとYouTubeの識別子5つが消え、Googleの3つが残ります。これは実質的な削減ではありますが、ゼロにはなりません。

https://www.youtube.com/embed/VIDEO_ID の代わりに https://www.youtube-nocookie.com/embed/VIDEO_ID を使ってください。埋め込みコードのそれ以外の部分はそのままで構いません。同意の前に何ひとつ書き込まれない状態が必要なのであれば、どちらの埋め込みでも実現できず、クリックしてから読み込むファサード方式が必要になります。これは後述のパフォーマンスの節で扱います。

再現したい方への注意を1点。すべての測定は初回読み込み時点のもので、再読み込みはしておらず、もう一方のテストページを訪れたことのないプロファイルで行っています。再読み込みしたページはすでにディスクにあるCookieを読むだけなので、初回訪問者に起きることの再現にはなりません。


パフォーマンス:YouTube埋め込みで避けられない問題

居心地の悪い事実からいきます。標準のYouTube埋め込みは、ページのパフォーマンスにとって非常に重い存在です。動画を1本埋め込むだけで、JavaScript・CSS・フォント・トラッキングスクリプトからなるプレーヤー一式が、複数のGoogleドメインへのリクエストとともに読み込まれます。そして本記事冒頭のCookie実測が示したとおり、その全部が読み込み時点で、訪問者が再生を押す前に起きています。

Core Web Vitalsを良好に保ちたいサイトにとって、これは問題です。Googleはこれをランキングのシグナルとして扱っています。最適化なしに1ページへ動画をいくつも埋め込むのは、Largest Contentful Paintを「poor」の帯域に押し込む最短の方法のひとつです。訪問者が何も要求していない段階から、プレーヤー一式が自分のコンテンツと帯域とメインスレッドを奪い合うからです。詳しい対策はソーシャルフィードを動かしながらサイトを速く保つガイド(英語)ソーシャルフィードのページ速度最適化(英語)にまとめています。

このアニメーションについて

最適化の前後でCore Web Vitals(LCPとCLS)がどう動くかを示したアニメーションです。標準のYouTubeのiframeは、訪問者が再生を押す前に重いリソース一式を読み込みます。遅延読み込みとファサード方式でその負荷をどこまで抑えられるかを視覚化しています。

対策1:HTML標準の属性による遅延読み込み

もっとも簡単な最適化は、YouTubeのiframeに loading="lazy" を足すことです。ページの読み込み時点ではなく、動画がビューポートに入りそうになった時点で読み込むよう、ブラウザに伝えます。

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

ChromeやEdgeなどのモダンブラウザはこれを標準でサポートしています。属性ひとつのコストで、ファーストビューより下にある埋め込みのプレーヤー一式を後回しにできます。一般的なページでは、ほとんどの埋め込みがそこに該当します。ただし自分で試したうえでの正直な注意点として、遅延読み込みが変えるのは「いつ」読み込むかであって、「何を」読み込むかではありません。iframeがビューポートに入れば、上で測定したとおりのプレーヤーとCookieがそのまま届きます。

対策2:ファサード方式(クリックしてから読み込む)

より踏み込んだ最適化がファサード方式です。ページ読み込み時に実際のYouTubeのiframeを置くのではなく、軽いプレースホルダー、たいていはサムネイル画像と再生ボタンを表示しておき、訪問者が再生ボタンを押した時点で実際の埋め込みを読み込みます。

この方式なら、埋め込みの初期コストはサムネイル画像1枚まで下がります。クリックされるまでYouTubeからは何も読み込まれないからです。そして、筆者のCookie実測で言えば、同意の観点をクリアできる唯一の方式でもあります。ファサードなら、訪問者が再生を選ぶまでCookieはひとつも書き込まれません。これはyoutube.comの埋め込みにもyoutube-nocookie.comの埋め込みにもできないことです。引き換えになるのは自動再生ができないことと、再生までにクリックが1回増えることです。

多くのビジネスサイトにとって、この引き換えは割に合います。手法としての信頼性も十分で、Google自身のエンジニアがBuilding a Better Webシリーズの中で、YouTubeのウェブアプリを高速化するためにファサード的な遅延読み込みを使ったと述べています。

対策3:最適化が組み込まれた外部ウィジェット

YouTubeに対応したソーシャルメディア集約ツールは、一般にパフォーマンス最適化をウィジェット側に組み込んでいます。CollectSocialsもその一例で、遅延読み込み、効率的なキャッシュ、最適化された埋め込みスクリプトによって、デザインの自由度を保ちながらパフォーマンスへの影響を抑えます。CollectSocialsでの設定手順は、下の手順解説がそのまま全体像です。

こうしたツールはレスポンシブ対応も自動で処理し、デバイスをまたいでアスペクト比を保ち、動画のエンゲージメントに関する分析も提供します。技術的な実装を自分で抱える必要はありません。

このアニメーションについて

動画サムネイルがまずプレースホルダーとして現れ、訪問者がそこまでスクロールするか再生を押したときに初めて実際のYouTubeプレーヤーが読み込まれる様子を示しています。このファサード方式なら、動画ライブラリ全体を並べたままでも最初のページ読み込みを軽く保てます。


YouTubeをサイトに置く価値

YouTubeは世界で2番目に大きい検索エンジンというだけの存在ではありません。ウェブサイトへの埋め込み素材としても非常に優れた形式です。動画は複雑な内容をテキストより効果的に伝え、静止画では見せられない形で製品を実演し、通常のページコンテンツよりもはるかに長く訪問者を引き留めます。

SEOで二重の恩恵があります。 YouTube動画をサイトに埋め込むと、ランキングの機会が2つになります。動画はYouTube検索で、ウェブページはGoogle検索で上位を狙えます。有効な動画の構造化データを持つページは、動画のリッチリザルトの対象にもなります。詳細は後半の構造化データの節で扱います。埋め込んだYouTubeコンテンツは、2つの検索エコシステムをまたいで働く発見の入口になります。

深さと信頼。 製品ページに置いた3分の実演動画は、文章をいくら並べても答えられない疑問に答えます。顧客の声を収めた動画は、書かれた引用では再現できない信頼を生みます。チュートリアルは、取引一辺倒ではなく役に立つブランドという位置づけを作ります。

資産として長く効きます。 TwitterやTikTokのような即時性の高いプラットフォームと違い、YouTubeのコンテンツはよく寝かせられます。丁寧に作ったチュートリアル、製品の実演、教育的な動画は、何年も価値を生み続けます。再生リストをサイトに埋め込むと、その長期的な価値が複利で効いてきます。追加の手間なしにコンテンツが働き続けるからです。

Googleのエコシステムとの相性。 すでにGoogleレビューの埋め込み(英語)をしているなら、YouTubeを足すことでGoogleエコシステム上の一貫した存在感が生まれます。どちらもGoogleの基盤を使い、どちらも(ローカルビジネスであれば)ローカルSEOに寄与し、それぞれ別種の信頼シグナルを積み上げます。

このアニメーションについて

再生リストやチャンネルのアップロードが、自社サイト上のブランド動画ギャラリーへ自動的に流れ込む様子を示したアニメーションです。訪問者にYouTubeチャンネルをわざわざ探してもらうのではなく、動画ライブラリのほうを、すでに読者がいる場所に置くという考え方です。

YouTubeの動画一覧を自分のサイトに表示してみませんか?7日間の無料トライアル。クレジットカードの登録は不要です。
無料で試してみる

CollectSocialsでYouTubeフィードを埋め込む手順

ここからは筆者が実際に使っている方法で、現行のダッシュボードでスクリーンショットを追いながら動く様子をお見せできる方法でもあります。空のダッシュボードから、50本の動画を読み込むウィジェットを公開するまで5分かかりませんでした。

ステップ1:フィードを作成する

ダッシュボードから新しいフィードを作成し、名前を付けます。「Default post status」(既定の投稿ステータス)のドロップダウンは見た目以上に重要です。「Approved」にすると、新しい動画は収集された瞬間からウィジェットに公開されます。「Pending」にすると、1本ずつ確認待ちで止まります。自分が運営するチャンネルであれば、通常はApprovedが適切です。自分の管理下にないものであれば、Pendingから始めてください。

CollectSocialsのダッシュボードでCreate a new feedダイアログを開き、名前にYoutube Feedと入力し既定の投稿ステータスをApprovedに設定した画面
フィードの作成画面。既定の投稿ステータスが、新しい動画をすぐ公開するか承認待ちにするかを決める。

ステップ2:ソースとしてYouTubeを選ぶ

ソースを追加し、プラットフォームの一覧からYouTubeを選びます。公開されているYouTubeコンテンツにはOAuthログインが不要なので、InstagramやFacebookのソースと違って、ここにアカウント接続の手順はありません。

CollectSocialsのChoose Platform画面。Googleレビュー、X/Twitter、Facebook、Instagram、TikTok、LinkedIn、RSSなどと並んでYouTubeが選択されている
プラットフォームの選択画面。YouTubeは他のソースと同じ並びにあるので、同じフィードに後からレビューやSNS投稿を混ぜることもできる。

ステップ3:コンテンツの種類を選ぶ

YouTubeのソースには2種類あります。「Channel / Playlist」は自動更新されるフィードで、新しいアップロードがサイトに触らずウィジェットに現れます。「Custom Feed」は自分で貼り付けた特定の動画URLの固定リストで、勝手に変わらない手選びのショーケースに向いています。以下ではチャンネルのほうを追います。最初に必要になる人が多いのはこちらだからです。カスタムフィードは独立した節を用意し、ステップ7のあとで扱います。

CollectSocialsのYouTubeソース種別選択画面。自動更新のChannel / Playlistと、動画URLを貼り付けるCustom Feedの2つのカードが並ぶ
左が自動更新のチャンネルまたは再生リスト、右が手選びの固定リスト。

ステップ4:YouTubeのリンクを貼り付ける

入力欄はチャンネルURL、@ハンドル、動画URL(チャンネルに解決されます)、再生リストURL、チャンネルIDのいずれも受け付けます。APIのクォータを気にする立場として好ましかった点として、/channel/形式のURLかチャンネルIDを直接貼り付けるのがもっとも安上がりです。IDをURLからそのまま読み取れるためで、確認用の照会に1クォータユニットで済みます。@ハンドルや動画URLの場合は2ユニット必要になります。

CollectSocialsのAdd YouTube Channel or Playlist画面。チャンネルURLを貼り付けた入力欄とResolveボタンが表示されている
入力欄はひとつで、受け付ける形式は複数。チャンネルURL、ハンドル、動画リンク、再生リストのリンク、チャンネルIDのいずれも解決される。

Resolveを押すとチャンネルを照会し、保存する前に見つかった内容を表示します。登録者数と動画本数まで出るので、名前の似たファンアカウントではなく目的のチャンネルであることを確認できます。

CollectSocialsのCHANNEL FOUND表示。Sunny Bunniesチャンネルが登録者4.0M、動画2.9Kとして見つかり、Continueボタンが表示されている
確定前の確認画面。解決されたチャンネルが、登録者数と動画本数とともに表示される。

ステップ5:フィードに紐づける

チャンネルの動画をどのフィードに入れるかを選びます。ソースとフィードは別のオブジェクトなので、1つのフィードに複数のチャンネルを入れることも、チャンネルとPinterestのボードを一緒に入れることもでき、ウィジェットはそれらをまとめて表示します。

CollectSocialsのSelect Feed画面。新しく作ったYouTubeフィードが選択され、Add to Feedボタンが表示されている
解決したチャンネルを、ステップ1で作ったフィードに紐づけているところ。

ステップ6:Collectページでモデレーションする

1分ほどでCollectページがチャンネルの最近の動画で埋まりました。筆者の場合は50本です。カードごとに承認・ピン留め・除外の操作があるので、キュレーションは動画単位です。公開したいものを承認し、常に先頭に置きたいものをピン留めし、本題から外れるものを除外します。Rulesタブは今後の動画に対してこれを自動化し、Custom postsでは自分のカードを流れの中に差し込めます。

CollectSocialsのCollectページ。収集されたYouTube動画が動画ごとの承認・ピン留め・除外ボタンとともに並び、合計50件と表示されている
取り込み後のCollectページ。50本の動画それぞれに承認・ピン留め・除外の操作がある。ツールチップはApprove postの操作を示している。

ステップ7:デザインを決め、共有して承認を取り、公開する

Design Studioは、実際のフィードに対して実際のウィジェットを描画しながら、レイアウト(グリッド、メイソンリー、カルーセル、マーキーなど)、テーマ、カードのテンプレートを選ばせてくれます。画面が狭い端末向けにモバイル専用のレイアウトを別に指定することもできます。この段階でツールバーの3つのボタンが重要になります。Previewは訪問者から見えるとおりにウィジェットを開きます。Shareは同僚やクライアントに送れるリンクを発行し、公開前にデザインを確認して承認してもらえます。受託の仕事では使う価値があります。承認が先、公開が後です。Get Codeはサイトに貼り付ける埋め込みコードを渡してくれます。

CollectSocialsのDesign StudioでYouTubeフィードをMarqueeレイアウトで表示し、Preview・Share・Get Codeの各ボタンとPublished!の状態が見えている画面
Design StudioでYouTubeフィードをマーキーのレイアウトにしたところ。ツールバーにPreview、チーム承認用のShare、Get Codeが並び、このフィードはすでに公開済みの状態。

埋め込み自体はひとつのスニペットです。多くのプラットフォームではscriptタグで、スクリプトを取り除いてしまうサービス向けにはiframe版が用意されています。Squarespaceの下位プランやNotionが該当します。ウィジェットはメディアを遅延読み込みし、レスポンシブなサイズ調整を処理し、Shadow DOMの内側で描画されるため、サイト側のCSSとウィジェット側のCSSが互いに漏れ出すことはありません。

自分で選んだ動画だけでフィードを作る

2つめのソース種別は、チャンネルの発信内容ではなく特定の動画の集合が目的のときに使うものです。ステップ3で「Custom Feed」を選ぶと、テキストボックスがひとつ現れます。動画のリンクを1行ずつ、あるいはカンマ区切りやスペース区切りで貼り付けると、入力に合わせてボックスの下のカウンターが有効な動画を何本見つけたかを読み返します。確定するとソース作成前に最初の5件のIDが表示されるので、貼り付けの誤りは修正が安いうちに見えます。

CollectSocialsのCreate Custom Video Feed画面。Paste Video URLsのボックスにwatchリンク・youtu.beリンク・Shortsリンクのプレースホルダーが並び、検出本数のカウンターと、固定フィードは自動更新されない旨のバッジが表示されている
何も貼り付けていない状態のカスタムフィード画面。プレースホルダーが受け付けるリンク形式のうち3つを示し、カウンターは有効なIDを見つけるまでゼロのまま。バッジは引き換え条件を先に明示している。このフィードは自動更新されない。

貼り付ける内容についてはあえて寛容に作られており、上のプレースホルダーがすべてではありません。標準の watch?v= 形式、youtu.be の短縮リンク、/embed/ のURL、Shortsのリンク、11文字の動画IDのいずれも、同じボックスの中に混在した状態で解析されますし、重複は2回追加されるのではなくまとめられます。これは聞こえより重要で、普段どおりの方法でリンクを集めて、まとめて貼り付け、あとは解析側に任せられるということです。

肝心なのは、何を要求しないかです。動画は自分のものである必要がなく、同じチャンネルである必要もなく、YouTubeのアカウントも再生リストもどこにも登場しません。カンファレンスの主催者なら、12人の登壇者のチャンネルからひとつのフィードを作れます。ショップなら、自社製品について顧客が投稿したレビュー動画を、無関係な十数のアカウントから集められます。そのリストを存在させるために、YouTubeのチャンネルに何かを公開する必要はありません。

公平な比較もしておきます。YouTube側でも、他人の公開動画を自分のチャンネルの再生リストに追加して、その再生リストを埋め込めば、これに近いことはできます。違いは、その再生リストが自分のチャンネル上の公開オブジェクトになること、自分のデザインではなくYouTubeのプレーヤーで表示されること、そしてYouTube動画以外のものと同じフィードを共有できないことです。ここでのカスタムフィードは自分のサイトに閉じており、選んだレイアウトとテーマで表示され、Instagramの投稿やGoogleレビューと同じフィードに同居でき、ステップ6と同じ動画単位の承認・ピン留め・除外が使えます。

作る前に知っておくべきことが2つあります。ひとつは設計上、静的であることです。このリストはチャンネルのソースが受ける自動更新の対象から外れているので、編集するまで選んだ動画をそのまま保持します。チャンネルではなくこちらを選ぶ理由そのものです。もうひとつはクォータの面で安いことです。貼り付けたテキストからIDを取り出す処理は純粋な文字列解析で、APIユニットを一切消費しません。APIに触れるのはタイトル・サムネイル・再生時間を取得する処理だけで、50本あたり1ユニットです。

APIクォータの注意: YouTube Data APIには、プロジェクトごとに1日10,000ユニットというクォータの上限があります。検索リクエストは100ユニット、動画の詳細取得は1ユニットです。独自に実装する場合は、上限に当たらないようクォータの消費量を監視してください。外部ウィジェットを使う場合は、この管理はツール側が引き受けます。

このアニメーションについて

動画向けのレイアウトを順に切り替えて見せるアニメーションです。本数の多いライブラリを一覧するためのサムネイルのグリッド、注目の再生リスト向けのカルーセル、連続もののシリーズ向けのリスト表示などが、デスクトップ・タブレット・モバイルでそれぞれレスポンシブに収まる様子を示しています。

再生リスト・個別動画・チャンネルフィードの使い分け

YouTubeが公式に用意している埋め込みの選択肢は、個別動画と再生リスト全体の2つです。どちらが適切かは、コンテンツの方針とビジネス上の目的で決まります。

個別動画の埋め込み

特定の動画を埋め込むのは、訪問者が見るものを厳密に制御したいときと、動画がそのページ固有の役割を果たすときです。製品ページに1本の実演動画。ランディングページに1本の顧客の声。ブログ記事に補足の解説動画。

長所は単純さと集中です。訪問者は余計なものなしに、見せたい内容をそのまま受け取ります。短所は手作業での維持で、動画を差し替えるたびに埋め込みコードを更新する必要があります。

再生リストの埋め込み

再生リストの埋め込みが向くのは、関連する動画のまとまりを見せたうえで、新しい動画を追加したら自動的に反映させたいときです。会社紹介ページの「お客様の声」再生リスト。サポートセクションの「製品チュートリアル」再生リスト。資料ページの「ウェビナー録画」再生リスト。

長所は自動化です。再生リストに動画を追加すれば、サイトのコードに触れずにすぐサイト上にも現れます。短所は制御の弱さで、再生リスト全体が表示されるため、複数の再生リストを管理しない限り特定の動画だけを選ぶことは簡単ではありません。

再生リスト自体がYouTube検索で個別に上位表示されることもあり、コンテンツへの導線が増えます。

チャンネルフィードの埋め込み

3つめの選択肢である、チャンネル全体を動的なフィードとして埋め込む方法は、定期的に動画を出していて、最新のアップロードを自動的にサイトに載せたい場合にもっとも力を発揮します。これはYouTube標準の埋め込みの選択肢ではなく外部の集約ツールが必要になりますが、いちばん自動化された、手のかからない解決策です。

SEO:VideoObjectの構造化データを正しく置く

YouTube動画の埋め込みは、ページに動画コンテンツを足す以上のSEOの機会をもたらします。構造化データを適切に実装すると、動画はGoogle検索でリッチリザルトを生み出せます。検索結果の中に動画のサムネイル、再生時間、公開日が直接表示される形です。これは自社ドメイン上にソーシャルコンテンツを集約することのSEO上の意義(英語)という、より大きな話の一部でもあります。

VideoObjectの実装

検索結果で動画のリッチスニペットを得るには、YouTube埋め込みを含むページにVideoObjectの構造化データを追加する必要があります。これによってGoogleに、その動画が何についてのもので、長さはどれくらいで、いつ公開され、サムネイルがどこにあるかを正確に伝えられます。

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "Your Video Title", "description": "Your video description", "thumbnailUrl": "https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg", "uploadDate": "2026-05-06T08:00:00+08:00", "duration": "PT2M30S", "contentUrl": "https://www.youtube.com/watch?v=VIDEO_ID", "embedUrl": "https://www.youtube.com/embed/VIDEO_ID" } </script>

Googleはこのマークアップをインデックスし、検索結果で動画の拡張スニペットとしてページを表示できます。有効なVideoObjectのマークアップを持つページは、動画のリッチリザルトと動画タブの対象になり、持たないページは対象になりません。これは対象になるかどうかの違いであって、流入の増加が保証されるという意味ではありません。

再生リストとSEO

再生リスト自体も、個々の動画とは独立してYouTube検索で上位に出ることがあります。テーマが一貫した整理された再生リストを作り、関連するページに埋め込むと、ランキングの機会が2つ生まれます。再生リストはYouTube検索で、ウェブページはGoogle検索で狙えます。

実践的な指針として、再生リストの名前は内容が分かるように、検索語を意識して付けてください。「動画」より「(製品名)の製品デモ」、「チュートリアルシリーズ」より「(テーマ)完全ガイド」です。再生リストのタイトルと説明はランキング要因になります。

レイアウトの選び方

YouTubeコンテンツの見せ方は、ユーザー体験にもコンバージョン率にも影響します。レイアウトごとに向き不向きがあります。

グリッド

サムネイルを並べたグリッド(デスクトップで3〜4列、モバイルで1〜2列が一般的)は、たくさんの動画を一度に見せて視覚的に選んでもらいたいときに向きます。情報密度が高く、教育系のコンテンツライブラリや量の多いチュートリアル集に適しています。

向いている場所:資料ページ、動画ライブラリ、チュートリアルのセクション、ブログのサイドバー。

カルーセル/スライダー

横方向のカルーセルで動画を1本ずつ(または少数ずつ)送っていく形は、ページを圧迫せずに特定のコンテンツを目立たせたいときに向きます。グリッドより見た目がすっきりし、個々の動画に視線を集められます。

向いている場所:トップページの特集、製品ページの顧客の声、会社紹介ページのハイライト。

サイドバーの再生リスト

縦のサイドバーに再生リストを表示する形(小さめのサムネイルとタイトルの組み合わせが多い)は、YouTube本体の見た目に近い体験になります。訪問者が主となる動画を1本見ていて、ページを離れずに関連コンテンツを勧めたいときに機能します。

向いている場所:作り込まれた製品ページ、補足動画のあるブログ記事、動画専用ページ。

リスト

サムネイル・タイトル・説明を縦に並べる単純なリストは、視覚的な一覧性よりテキスト情報を優先します。動画のタイトルと説明がサムネイルと同じくらい重要になる、専門的な文脈やBtoBの文脈で有効です。

向いている場所:教育機関、BtoB企業、専門サービス、技術ドキュメント。

YouTubeの動画一覧を自分のサイトに表示してみませんか?7日間の無料トライアル。クレジットカードの登録は不要です。
無料で試してみる

どのページに置くと効くのか

サイトの全ページにYouTubeコンテンツを埋め込んでも意味はありません。戦略的な配置とは、動画の内容を訪問者の意図とページの目的に合わせることです。これはソーシャルフィードをサイトのどこに置くか(英語)で詳しく扱っている配置の考え方と同じです。

このアニメーションについて

動画の配置をページの種類に対応づけたアニメーションです。製品ページには製品デモ、サポートのセクションにはチュートリアルの再生リスト、会社紹介ページにはカルチャー動画、トップページには特集コンテンツ、という具合に、それぞれが理解・比較検討・信頼づくりという別々の訪問者の意図に対応します。

製品ページ: 製品の実演動画、開封動画、使い方のチュートリアルは製品ページに置きます。主要な製品説明の下、レビューや関連商品の上が適切です。ここまでスクロールした訪問者は関心を持っています。動画は細かい疑問に答え、確信を後押しします。

サポート・ヘルプページ: チュートリアルの再生リスト、トラブルシューティング動画、FAQの解説はサポートページで非常によく機能します。複雑な手順は、しばしば文章より動画のほうがうまく説明できます。よく見られているサポート動画の再生リストを埋め込み、訪問者に自己解決してもらいましょう。

会社紹介・カルチャーページ: 舞台裏の動画、チーム紹介、社風のコンテンツは、会社紹介ページでブランドに人格を与えます。ファーストビューに動画を置くことが理にかなう数少ない場面のひとつでもあります。このページの訪問者は、はっきりと会社について知りたいと思って来ているからです。

ブログ・資料ページ: 関連するYouTube動画をブログ記事の本文中に、あるいは資料ページのサイドバーウィジェットとして埋め込みます。動画でも扱ったテーマについて書いているなら、その動画を埋め込むことで内容が厚くなり、滞在時間も伸びます。

トップページ(慎重に): トップページの動画は、中心のメッセージを補強するものであって、そこから注意をそらすものであってはいけません。製品や価値提案を見せる特集動画を1本置くのは有効ですが、再生リストのフィードを丸ごと置くとコンバージョン要素と競合しがちです。導入前にテストしてください。

ランディングページ(ほとんどの場合は不要): コンバージョン率の高いランディングページは、焦点がひとつに絞られています。動画を足すこと自体は有効な場合があります(顧客の声の動画、60秒の説明動画など)が、再生リストのフィード全体は、気を散らす要素を作ってコンバージョンを下げるのが普通です。例外は、動画そのものがコンバージョンの手段になっている動画ランディングページです。

YouTubeとGoogleレビューの組み合わせ

すでにGoogleレビュー(英語)をサイトに埋め込んでいるなら、YouTubeを足すことで社会的証明の強力な二段構えができます。文章による証言(レビュー)と、映像による証言(動画)です。

この組み合わせは、ローカルビジネス、サービス業、EC ブランドで特によく効きます。Googleレビューは顧客の声で信頼を築きます。YouTube動画は製品・サービス・専門性が実際に動くところを見せます。両者は、信用(レビュー)と理解(動画)という別々の心理的な引き金に働きかけます。

技術的な観点でも、どちらもGoogleの基盤を使い、どちらも(ローカルビジネスであれば)ローカルSEOのランキングに寄与し、マルチプラットフォーム対応のツールを選べば同じ集約プラットフォームで管理できます。

効果測定で本当に見るべき指標

埋め込んだYouTube動画は何層もの分析データを生みますが、そのすべてが事業判断に役立つわけではありません。目的に結びつく指標に絞ってください。

ページごとの視聴時間: 埋め込んだ動画を訪問者はどれくらい見ているか。YouTubeアナリティクスはチャンネル全体のデータを出しますが、ページ単位の動画エンゲージメントを知るにはサイト側の分析が必要です。5分の動画の平均視聴が30秒なら、内容が訪問者の意図と合っていないか、置き場所が間違っています。

YouTubeへの遷移率: 埋め込み動画を見た訪問者のうち、YouTubeチャンネルへ移動する割合はどれくらいか。動画の内容が、その先のエンゲージメントを促すだけの力を持っているかが分かります。認知拡大が目的ならYouTubeへの高い遷移率は歓迎すべきですが、コンバージョンを狙うページでは、訪問者が早々にサイトを離れている兆候かもしれません。

滞在時間への影響: 埋め込み動画に触れた訪問者は、サイト全体でより長く過ごしているか。Googleアナリティクスで、動画に接触したユーザーとそうでないユーザーを分けて比較してください。動画のエンゲージメントとセッションの長さに相関があるなら、意図どおりに機能しています。

コンバージョンとの関係: 最終的な指標です。埋め込み動画を見た訪問者は、より高い割合でコンバージョンしているか。ECなら購入率、SaaSなら登録率、リード獲得ならフォーム完了率を比較します。GA4で動画操作のカスタムイベントを設定して計測してください。

ソーシャルフィードの分析については、本当に見るべき指標のガイド(英語)で詳しく扱っています。

よくある5つの失敗

見かける「うまくいっていないYouTube埋め込み」のほとんどは、5つの失敗パターンで説明がつきます。しかもそのすべてが、埋め込みコードの側で回避できます。

失敗1:遅延読み込みをしていない。 遅延読み込みなしでYouTube動画を埋め込むと、ページのパフォーマンスは崩れます。すべてのiframeに loading="lazy" を付けるか、これを自動で処理するウィジェットツールを使ってください。Core Web Vitalsを良好に保つうえで妥協できない点です。

失敗2:音声つきの自動再生。 音が出る状態での自動再生は訪問者を苛立たせ、アクセシビリティ上の問題も生みます。どうしても自動再生するなら、既定でミュートにして、はっきりしたミュート解除の操作を用意してください。できれば自動再生自体をやめて、見るタイミングは訪問者に委ねるのが最善です。

失敗3:一度に埋め込みすぎる。 1ページに50本以上のYouTube動画を並べると、選択の負荷が生まれ、パフォーマンスも落ちます。初期表示は最大12〜20本にとどめ、もっと見たい訪問者には「もっと見る」を用意してください。

失敗4:モバイルでの見え方を確認していない。 多くの訪問者は、あなたが制作に使った回線より遅い環境で、スマートフォンから動画に出会います。そこで埋め込んだ再生リストがうまく動かない(サイズが崩れる、読み込みが遅い、レイアウトが壊れる)なら、それは例外的なケースではなく視聴者の大半です。実装完了と判断する前に、実機で確認してください。

失敗5:構造化データがない。 VideoObjectの構造化データなしにYouTube動画を埋め込むと、リッチな検索結果と可視性の向上を取り逃がします。動画を埋め込んだすべてのページに、適切な構造化データを追加してください。

CollectSocialsについての補足: CollectSocialsはYouTubeの再生リスト、チャンネル、個別動画に対応しており、遅延読み込み、レスポンシブ対応、Shadow DOMによるスタイルの分離、そしてInstagram・Facebook・TikTokと同じデザインの自由度が組み込まれています。YouTubeと他のソースを組み合わせたマルチプラットフォームのフィードにも対応しています。上のSEOの節で示したVideoObjectのマークアップは、自分でページに追加するものです。当社を含め、埋め込みツールがこれを書いてくれることはありません。

よくある質問

YouTubeの再生リストをホームページに埋め込むには?

目的の再生リストを開き、「共有」から「埋め込む」を選んでiframeコードをコピーし、ページに貼り付けます。コード内の PLAYLIST_ID は、YouTubeのURLの list= 以降にあるIDです。スマートフォンでも崩れないようにするには、上のレスポンシブなCSSラッパーで囲んでください。

チャンネルの動画一覧を自動更新でサイトに表示できますか?

YouTube公式の埋め込みにはチャンネルフィードの機能がありません。新しいアップロードが自動的にサイトに並ぶ形にしたい場合は、YouTube Data API経由で動作する集約ツールが必要です。本記事のCollectSocialsの手順がその一例です。

youtube-nocookie.comを使えばCookieは書き込まれませんか?

いいえ。実測では、訪問者が再生を押す前の時点で、標準の埋め込みと同じ名前の.google.com Cookieが3つ書き込まれました。消えるのは.youtube.comの識別子5つです。同意の前に何も書き込ませたくない場合は、クリックしてから読み込むファサード方式が必要です。

埋め込み動画でページが重くなるのを防ぐには?

まずすべてのiframeに loading="lazy" を付けます。ただし遅延読み込みが変えるのは読み込むタイミングだけで、読み込む中身は変わりません。初期コストをサムネイル1枚まで下げたい場合はファサード方式にするか、遅延読み込みが組み込まれたウィジェットツールを使ってください。

自分のチャンネルの動画でなくても集められますか?

カスタムフィードなら可能です。動画は自分のものである必要も、同じチャンネルである必要もなく、YouTubeのアカウントも再生リストも登場しません。動画のリンクを貼り付けるだけで固定のフィードになります。ただしこのフィードは設計上静的で、編集するまで自動更新されません。

再生リストの埋め込みはやる価値があるか

YouTubeの再生リストをサイトに埋め込むことは、チェック項目を埋めたり流行に乗ったりする話ではありません。せっかくの動画コンテンツに、より多く働いてもらう話です。すでに読者がいて、購入や申し込みの意図を持って訪れている場所、つまり自分のサイトの上で、です。

きちんとやれば、埋め込んだYouTubeコンテンツは戦略的な資産になります。訪問者を教育し、主張ではなく実演によって信頼を築き、動画の構造化データと二重のランキング機会でSEOを改善し、手作業の更新なしにサイトを新鮮に保ちます。

雑にやれば、つまりパフォーマンスの最適化も、戦略的な配置も、適切な構造化データもないままなら、それは助けよりも害の大きいページの重しになります。

違いを分けるのは意図です。目的のあるYouTubeコンテンツを埋め込み、最初からパフォーマンスを最適化し、ブランドに合わせてデザインし、訪問者の疑問に答える場所に置き、そして実際に事業の成果に寄与しているかを測ってください。

CollectSocialsを今すぐ試す

チャンネルや再生リストを貼り付けるだけで、自動更新される動画ギャラリーがサイトに載ります。デザインもモデレーションもそのまま設定できます。


参考リンク(英語)