YouTube複数プレイリストの動画一覧取得サンプル

https://www.youtube.com/playlist?list=PLSx6MdBnoFbC5QUH7Z2kR16Js51w-5yTZ と
https://www.youtube.com/playlist?list=PLSx6MdBnoFbAqLpUAxWDUOuwNeQEA4PuZ から取得

<section>
  <div>
    <h2>グラブル</h2>
    <ul id="result"></ul>
  </div>

  <div>
    <h2>ドラガリアロスト</h2>
    <ul id="result2"></ul>
  </div>
</section>

<script>
function onGoogleLoad() {
  gapi.client.setApiKey('AIzaSyBkA8ZXf8VLLNt9CBl8c9IPD771_cmfGeg');
  gapi.client.load('youtube', 'v3', function() {
    var result = document.getElementById('result');
    var result2 = document.getElementById('result2');
    var request = gapi.client.youtube.playlistItems.list({
      playlistId: 'PLSx6MdBnoFbC5QUH7Z2kR16Js51w-5yTZ',
      part: 'snippet,contentDetails',
      maxResults: 3,
    });
    var request2 = gapi.client.youtube.playlistItems.list({
      playlistId: 'PLSx6MdBnoFbAqLpUAxWDUOuwNeQEA4PuZ',
      part: 'snippet,contentDetails',
      maxResults: 2,
    });
    var generateHTML = function(response) {
      var html = [];
      for (var i = 0; i < response.items.length; i++) {
        var snippet = response.items[i].snippet;
        var videoId = snippet.resourceId.videoId;
        var videoPublishedAt = response.items[i].contentDetails.videoPublishedAt;
        html.push(`
          <li>
          videoId: ${videoId}<br>
          title: ${snippet.title}<br>
          videoPublishedAt: ${new Date(videoPublishedAt).toLocaleString()}<br>
          <iframe width="280" height="157" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </li>
        `);
      }
      return html.join('');
    }
    request.execute(function(response) {
      result.innerHTML = generateHTML(response);
    });
    request2.execute(function(response) {
      result2.innerHTML = generateHTML(response);
    });
  });
}
</script>
<script src="https://apis.google.com/js/client.js?onload=onGoogleLoad"></script>

元記事を表示する