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

Question

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

Answer 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 = '';
});
}