【YouTube】再生リストの埋め込みコードを取得し、サイトやブログへ埋め込む方法

YouTubeでは、複数の動画をまとめた再生リストというコンテンツがありますが、今回は、その再生リストの埋め込みコードを取得し、Webサイトやブログ内に埋め込む方法となります。

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

YouTubeの再生リストを、Webサイトやブログ内に埋め込むには再生リストの埋め込みコードを使用します。

再生リストの埋め込みコードはiframeタグとなり、WebサイトやブログのHTML内に貼り付けることにより、YouTubeの再生リストを埋め込むことができます。

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

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

再生リストの埋め込みコードを取得する方法

以下、YouTubeチャンネルで公開されている再生リストの埋め込みコードを、取得する方法となります。

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

埋め込みコードを取得する方法

以下、最初に再生される動画を指定する再生リストの埋め込みコードを、取得・埋め込む例となります。

  1. 埋め込みコードを取得したい再生リストがあるYouTubeチャンネルへ移動し、メニュー内の「再生リスト」を選択します。
    YouTubeチャンネルページの画像
    YouTubeチャンネルのメニュー
  2. 「作成した再生リスト」一覧が表示されるので、埋め込みコードを取得したい再生リストを選択します。
    「作成した再生リスト」一覧の画像
    「作成した再生リスト」一覧が表示された状態
  3. 再生リストのページ移動すると、右カラムに再生リスト内の動画一覧が表示されるので、その動画の中から最初に再生したい動画を選択します。
    再生リストのページの画像
    再生リストページの右カラム。右カラムには再生リスト内の動画一覧が表示されます。
  4. 最初に再生したい動画のページへ移動するので、その動画上で右クリックを押し、表示されたメニューの中から「埋め込みコードをコピー」を選択します。それにより、再生リストの埋め込みコードがコピーされます。
    再生リスト内の動画上で右クリックを押した際の画像
    再生リスト内の動画上で右クリックを押した状態
  5. コピーした埋め込みコードを、サイトやブログのHTML内にペーストします。 

以下は、上記手順の動画となります。

また、最初に再生される動画を指定する再生リストの場合、以下の例のような埋め込みコードとなります。

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

iframeタグのsrc属性値は以下の形式のURLとなり、embed/の隣のXXXXXXは「動画 ID」で、listパラメータ値のXXXXXXは「再生リスト ID」となります。

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

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

再生リストで最初に再生される動画を指定しない場合、再生リストの1番目の動画から再生され、以下の例のような埋め込みコードとなります。

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

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

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

埋め込みコードを取得する方法

埋め込みコードの取得する方法としては、まず、前述の方法で埋め込みコードを取得し、「動画 ID」の箇所を削除する方法があります。

再生リスト IDの確認方法

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

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

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

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

YouTubeチャンネルに公開されていない再生リスト

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

ユーザーがアップロードした動画の再生リスト

「YouTubeユーザー名」が分かる場合、ユーザーがアップロードした動画の再生リストを埋め込むことが出来ます。

ユーザーがアップロードした動画の再生リストは、以下の例のような埋め込みコードとなります。例ではユーザー名に「videonewscom」を指定しています。

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

iframeタグのsrc属性値は以下のURLの形式となり、listパラメータ値のXXXXXXの箇所に「YouTubeユーザー名」を指定します。

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

検索結果で取得した動画の再生リスト

検索ワードを指定し、その検索結果で取得した動画の再生リストを埋め込むことも出来ます。

検索結果で取得した動画の再生リストは、以下の例のような埋め込みコードとなります。例では、検索ワードに「パンダ」を指定しています。

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

iframeタグのsrc属性値は以下のURLの形式となり、listパラメータ値のXXXXXXの箇所に、検索ワードを指定します。

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

通常のYouTube動画を埋め込む方法

再生リストではなく、通常のYouTube動画を埋め込む方法については、以下のリンク先を参考にしてみてください。

埋め込んだ再生リストをレスポンシブにする方法

サイトやブログ内に埋め込んだ再生リストをデバイスサイズにより可変させ、レスポンシブとする方法については、以下のリンク先を参考にしてみてください。

まとめ

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

参考サイトなど

コメント投稿またはTwitterで返信

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

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