在一个页面上嵌入多个YouTube播放列表供稿？ JQuery / YouTube API v3

如何在一个页面上实施多个YouTubevideo播放列表供稿？ 到目前为止，我已经开发了一个函数来从单个播放列表中提供最近的上传，但我不确定如何将其应用于多个播放列表。

在提供的代码段中，我只有一个播放列表返回video列表数据。 用于嵌入播放列表的HTML字符串是#youtube-playlist-feed_1 ，但理想情况下我希望能够实现多个Feed，例如： #youtube-playlist-feed_2 ， #youtube-playlist-feed_3等…任何输入？

 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 += '
' + '
' + title + '
'; }); $('#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%; } 

  
YouTube Playlist Feed #1:
 
 
 
YouTube Playlist Feed #2:
  
 Playlist #2 ID: PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr- 
 
 
YouTube Playlist Feed #3:
  
 Playlist #3 ID: PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An  

UPDATE /解决方案：

哇，非常感谢Dennis Rongo帮助实现这个出色的解决方案 ！

现在，可以在单个页面上嵌入多个播放列表供稿，如以下代码段所示：

 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 += '
' + '
' + title + '
'; }); $(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%; } 

  
YouTube Playlist Feed #1:
 
 
 
YouTube Playlist Feed #2:
 
 
 
YouTube Playlist Feed #3:
 
 

Answer 1

像这样的东西会起作用。 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 += '
' + '
' + title + '
'; }); $(el).html(htmlString); htmlString = ''; }); }