如何嵌入带有标题的 YouTube 频道的视频？

Posted 2023-05-09

【中文标题】如何嵌入带有标题的 YouTube 频道的视频？

【英文标题】：How To Embed Videos From A YouTube Channel with Title?

【发布时间】：2020-08-20 06:21:59

【问题描述】：

我在 jQuery 中找到了一段代码，可以自动从我的 YouTube 频道检索最后的视频。但问题是代码不显示视频的标题。我想在我的网站上的播放器下显示视频标题。

为了显示带标题的视频，我应该进行哪些更改？

代码如下：

html：

<iframe class="latestVideoEmbed" vnum='0' cid="UC7WnrV5aBx7LjWp0lorB73Q" </iframe>

javascript：

var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");

function loadVideo(iframe) 
  $.getJSON(reqURL + iframe.getAttribute('cid'),
    function(data) 
      var videoNumber = (iframe.getAttribute('vnum') ? Number(iframe.getAttribute('vnum')) : 0);
      console.log(videoNumber);
      var link = data.items[videoNumber].link;
      id = link.substr(link.indexOf("=") + 1);
      iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=0&autoplay=1");
    
  );


var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++) 
  loadVideo(iframes[i]);

jQuery 链接：

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

【问题讨论】：

您是否在从 youtube 服务器获取数据后尝试打印结果

不，我没有。我会尝试:)

【参考方案1】：

经过长期的痛苦，我自己解决了这个问题。我添加了一些代码。 HTML 是一样的。这是代码：

function loadVideo(iframe) 
  $.getJSON(reqURL + iframe.getAttribute('cid'),
    function(data) 
      var videoNumber = (iframe.getAttribute('vnum') ? Number(iframe.getAttribute('vnum')) : 0);
      console.log(videoNumber);
      var link = data.items[videoNumber].link;
      id = link.substr(link.indexOf("=") + 1);
      iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=0&autoplay=1");

      var url = 'https://www.youtube.com/channel/' + channelID;
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?id=' + id + '&key=' + apiKey + '&fields=items(snippet(title))&part=snippet', format: 'json', url: url, function (data) 
        var h2s = $("h2")
        console.log(data.items)
        $(h2s[videoNumber]).html(data.items[0].snippet.title)

      );
    
  );