Embedding Multiple YouTube Playlist Feeds on a Single Page? JQuery/YouTube API v3

问题

How can multiple YouTube video playlist feeds be implemented on a single page? So far I have developed a function to deliver recent uploads from a single playlist, but I am not sure how to apply this to multiple playlists.

In the snippet provided, I only have a single playlist returning video list data. The HTML string for embedding the playlist is #youtube-playlist-feed_1, but ideally I would like the capability to implement more than one feed, for example: #youtube-playlist-feed_2, #youtube-playlist-feed_3, etc... Any input?

var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;

$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistID + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
  $.each(data.items, function(i, item) {
    var videoID = item['snippet']['resourceId']['videoId'];
    var title = item['snippet']['title'];
    var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
    htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
  });
  $('#youtube-playlist-feed_1').html(htmlString);
});

body {
  margin: 0;
  padding: 0;
  font-family: arial;
  font-size: 16px;
}

hr {
  border-bottom: 1px solid grey;
  margin: 20px 0;
  display: block;
  width: 100%;
  float: left;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

h1 {
  font-weight: bold;
  font-size: 18px;
  display: block;
  width: 100%;
  line-height: normal;
}

.video-wrap:first-of-type {
  width: 100%;
  max-width: 100%;
  display: block;
}

.video-wrap {
  max-width: 33.333333%;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  float: left;
}

.video {
  width: 100%;
  margin: 0;
  line-height: 0;
}

.video a {
  display: block;
}

.title {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: normal;
  padding: 5px;
}

.title a {
  text-decoration: none;
  color: #000000;
}

.video img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>YouTube Playlist Feed #1:</h1>
<div id="youtube-playlist-feed_1"></div>

<hr>

<h1>YouTube Playlist Feed #2:</h1>
<!-- INSERT 2ND YOUTUBE PLAYLIST FEED -->
<div id="youtube-playlist-feed_2">
  Playlist #2 ID: PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-
</div>

<hr>

<h1>YouTube Playlist Feed #3:</h1>
<!-- INSERT 3RD YOUTUBE PLAYLIST FEED -->
<div id="youtube-playlist-feed_3">
  Playlist #3 ID: PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An
</div>

UPDATE/SOLUTION:

Wow, big thanks to Dennis Rongo for helping achieve this excellent solution!

Now multiple playlist feeds can be embedded on a single page, demonstrated in the following snippet:

var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;

var playlists = [{
    playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt',
    el: '#youtube-playlist-feed_1'
  },
  {
    playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-',
    el: '#youtube-playlist-feed_2'
  },
  {
    playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
    el: '#youtube-playlist-feed_3'
  }
];

playlists.forEach(function(playlist) {
  getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})

function getVideoFeedByPlaylistId(playlistId, el) {
  $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
    $.each(data.items, function(i, item) {
      var videoID = item['snippet']['resourceId']['videoId'];
      var title = item['snippet']['title'];
      var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
      htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
    });
    $(el).html(htmlString);

    htmlString = '';
  });
}

body {
  margin: 0;
  padding: 0;
  font-family: arial;
}

hr {
  border-bottom: 1px solid grey;
  margin: 20px 0;
  display: block;
  width: 100%;
  float: left;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

h1 {
  font-weight: bold;
  font-size: 18px;
  display: block;
  width: 100%;
  line-height: normal;
}

.video-wrap:first-of-type {
  width: 100%;
  max-width: 100%;
  display: block;
}

.video-wrap {
  max-width: 33.333333%;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  float: left;
}

.video {
  width: 100%;
  margin: 0;
  line-height: 0;
}

.video a {
  display: block;
}

.title {
  text-align: center;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: normal;
  padding: 5px;
}

.title a {
  text-decoration: none;
  color: #000000;
}

.video img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>YouTube Playlist Feed #1:</h1>
<div id="youtube-playlist-feed_1"></div>

<hr>

<h1>YouTube Playlist Feed #2:</h1>
<div id="youtube-playlist-feed_2"></div>

<hr>

<h1>YouTube Playlist Feed #3:</h1>
<div id="youtube-playlist-feed_3"></div>

回答1:

Something like this would work. Plunkr

var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;

var playlists = [
  { playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt', el: '#youtube-playlist-feed_1' },
  { playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-', el: '#youtube-playlist-feed_2' },
  { playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An', el: '#youtube-playlist-feed_3' }
];

playlists.forEach(function(playlist){
  getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})

function getVideoFeedByPlaylistId(playlistId, el){
  $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
  $.each(data.items, function(i, item) {
    var videoID = item['snippet']['resourceId']['videoId'];
    var title = item['snippet']['title'];
    var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
    htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
  });
  $(el).html(htmlString);

  htmlString = '';
});
}

来源：https://stackoverflow.com/questions/48632837/embedding-multiple-youtube-playlist-feeds-on-a-single-page-jquery-youtube-api-v