プレイリストからYouTubeの埋め込みを行う

YouTubeのプレイリストの情報を元に、YouTubeの埋め込みが行えるのかを試してみました。

サンプルコード

listTypeでplaylistを指定した上で、listでプレイリストIDを指定するといいようです。

<div id="sample"></div>

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
function onYouTubeIframeAPIReady() {
  var player = new YT.Player('sample', {
    playerVars: {
      listType: 'playlist',
      list: 'PLR48NTfP0M0Nv3uFq7ka52rndi7_KJE41'
    }
  });
}

これでプレイリストを元にYouTubeの埋め込みができました。
プレイリストからYouTubeの埋め込みを行うデモページ

プレーヤーにプレイリストを読み込んだ後であれば、プレイリスト内の動画IDを取得することもできるようです。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
function onYouTubeIframeAPIReady() {
  var player = new YT.Player('sample', {
    playerVars: {
      listType: 'playlist',
      list: 'PLR48NTfP0M0Nv3uFq7ka52rndi7_KJE41'
    },
    events: {
      'onReady': function() {
        var playlistIds = player.getPlaylist();
        console.log(playlistIds);
      },
    }
  });
}

プレイリスト内の動画IDを取得するデモページ

プレーヤーにプレイリストを読み込ませずに直接動画IDを取得したい場合、YouTube Data APIを使用する必要があります。
以前にYouTube Data APIで再生リスト内の動画情報を取得する記事を投稿していますので、詳しくはそちらをご確認ください。