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

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

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

YouTubeの再生リストを埋め込む際に利用するタグは、iframeタグとなります。

以下は、その再生リストのiframeタグの例となり、src属性で指定するURLのXXXXXXの箇所が再生リストによって異なります。

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

以下、再生リストの埋め込みコードの種類と、そのコードを取得、記述する方法となります。

再生リストを埋め込む方法

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

再生リストで最初に再生される動画を指定しない場合、再生リストの1番目の動画から再生されます。

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

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

再生リスト IDの確認方法

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

例えば、再生リストのページURLが以下の場合、

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

「再生リスト ID」は「PLqyie2vBCEVXk7b6Tgig6Op3NUg2MlXSN」の箇所となります。

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

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

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

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

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

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

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

また、上記方法でコピーされるiframeタグのsrc属性値は、以下の形式の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で返信する場合はこちらから。

また、コメントは承認制となります。