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

Posted

技术标签:

【中文标题】在单个页面上嵌入多个 YouTube 播放列表供稿？ jQuery/YouTube API v3【英文标题】：Embedding Multiple YouTube Playlist Feeds on a Single Page? JQuery/YouTube API v3 【发布时间】：2018-07-15 21:57:57 【问题描述】：

如何在一个页面上实现多个 YouTube 视频播放列表供稿？到目前为止，我已经开发了一个从单个播放列表传送最近上传的功能，但我不确定如何将它应用到多个播放列表。

在提供的 sn-p 中，我只有一个播放列表返回视频列表数据。用于嵌入播放列表的 html 字符串是 #youtube-playlist-feed_1，但理想情况下，我希望能够实现多个提要，例如：#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 += '<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>

更新/解决方案：

哇，非常感谢Dennis Rongo 帮助实现这一目标excellent solution！

现在可以在单个页面上嵌入多个播放列表提要，如下面的 sn-p 所示：

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】：

这样的事情会奏效。 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 = '';
);

【讨论】：

这个解决方案非常完美，正是我所需要的！再次，非常感谢您的帮助。我已经继续并用您的解决方案更新了原始问题。 @nrweb 没问题。

以上是关于在单个页面上嵌入多个 YouTube 播放列表供稿？ jQuery/YouTube API v3的主要内容，如果未能解决你的问题，请参考以下文章

让多个嵌入式 Youtube 视频按顺序自动播放

单个嵌入 URL 中的多个 YouTube 视频

jQuery 在页面加载时播放 iframe 嵌入的 YouTube 视频

HTML YouTube 显示所有视频？

尝试使用 <iframe> 标签嵌入 YouTube 视频

避免 zindex 的 Youtube 嵌入播放器