【YouTube】再生リストを埋め込む方法|埋め込みコードの取得など

YouTubeの再生リストの埋め込みコードを取得しようと思っても、再生リストのページ画面上には、埋め込みコードを取得するボタンはないようです。

そのため、今回はYouTubeの再生リストの埋め込みコードを取得し、サイト内に埋め込む方法の紹介となります。

再生リストのiframeタグについて

以下は、YouTubeの再生リストを埋め込む際に使用するiframeタグの例です。埋め込む再生リストによって、src属性で指定するURLのXXXXXXの箇所が変わります。

<iframe src="https://www.youtube.com/embed/XXXXXX" width="854" height="480" ></iframe>

src属性で指定するURLについては、以下に説明します。

再生リストの埋め込み

最初に再生される動画を指定しない場合

再生リストを埋め込む際に、最初に再生される動画を指定しない場合は、再生リストの1番目の動画から再生されます。iframeタグのsrc属性の指定方法は以下となります。

iframeタグのsrc属性に以下のURLを指定します。listパラメータ値のXXXXXXの箇所に、埋め込みたい再生リストの「再生リスト ID」を指定します。

https://www.youtube.com/embed/?list=XXXXXX

「再生リスト ID」は、再生リストのページURLから確認でき、URLのPLから始まるlistパラメータ値が「再生リスト ID」となります。

例えば、再生リストのページURLが以下の場合、「再生リスト ID」は「PLqyie2vBCEVXk7b6Tgig6Op3NUg2MlXSN」となります。

https://www.youtube.com/watch?v=emnQDjr_iaw&list=PLqyie2vBCEVXk7b6Tgig6Op3NUg2MlXSN

【例】再生リスト「小飼弾の論弾」の埋め込みコード

以下は埋め込みコードの例となり、再生リスト「小飼弾の論弾」の場合です。

<iframe src="https://www.youtube.com/embed/?list=PLEfBSff_VVkHftZydK6Sh3n8PzZlGuXbn" width="854" height="480" ></iframe>

最初に再生される動画を指定する場合

再生リストを埋め込む際に、最初に再生される動画を指定するには以下の方法となります。

  1. まず、埋め込みコードを取得したい再生リストのページにアクセスします。
  2. 次に再生リストの中で、最初に再生したい動画のページへ移動します。
  3. その動画上で右クリックを押すと、コンテキストメニューの中に「埋め込みコードをコピー」という項目があるので、それを選択することにより、選択した動画から始まる再生リストの埋め込みコードがコピーされます。
  4. コピーされた埋め込みコードをHTMLコード内の表示したい箇所にペーストします。 

【動画サンプル】埋め込みコードを取得する方法

ちなみに上記方法コピーされるiframeタグのsrc属性のURLは、以下の形式のURLとなり、embed/の隣のXXXXXXに「動画 ID」が指定され、listパラメータ値のXXXXXXには「再生リスト ID」が指定されます。

https://www.youtube.com/embed/XXXXXX?list=XXXXXX

【例】再生リスト「小飼弾の論弾」で、最初の動画を指定した場合の埋め込みコード

以下は埋め込みコードの例となり、再生リスト「小飼弾の論弾」で、最初の動画を指定した場合です。

<iframe src="https://www.youtube.com/embed/IMp3x68KrqY?list=PLEfBSff_VVkHftZydK6Sh3n8PzZlGuXbn" width="854" height="480" ></iframe>

チャンネルページ以外の再生リストの埋め込み

YouTubeチャンネルのページに公開されている再生リストの他に、以下のような再生リストも埋め込むことが出来ます。

ユーザーがアップロードした動画の再生リストを埋め込み

「YouTubeユーザー名」がわかれば、ユーザーがアップロードした動画の再生リストを埋め込むことが出来ます。方法は以下となります。

iframeタグのsrc属性に以下のURLを指定することで、チャンネルでアップロードされているすべての動画の再生リストが表示されます。listパラメータ値のXXXXXXの箇所に、「YouTubeユーザー名」を指定してください。

https://www.youtube.com/embed/?listType=user_uploads&list=XXXXXX

【例】チャンネル「videonewscom」の埋め込みコード

以下は埋め込みコードの例となり、チャンネル「videonewscom」の場合です。

<iframe src="https://www.youtube.com/embed/?listType=user_uploads&list=videonewscom" width="854" height="480" ></iframe>

検索結果で取得された再生リストを埋め込み

検索ワードを指定し、その検索結果で取得された動画の再生リストを埋め込むことが出来ます。方法は以下となります。

iframeタグのsrc属性に以下のURLを指定することで、指定した検索ワードの再生リストが表示されます。listパラメータ値のXXXXXXの箇所に、指定したい検索ワードを指定してください。

http://www.youtube.com/embed?listType=search&list=XXXXXX

【例】検索ワード「パンダ」を指定した場合の埋め込みコード

以下は埋め込みコードの例となり、検索ワード「パンダ」を指定した場合です。

<iframe src="https://www.youtube.com/embed?listType=search&list=パンダ" width="854" height="480" ></iframe>

YouTube の埋め込みプレーヤーには、他にも設定ができるパラメータがありますので、詳しくは以下の参照サイトを参考にしてみてください。

参照サイト・書籍

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。