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

【问题标题】：How To Embed Videos From A YouTube Channel with Title?如何嵌入带有标题的 YouTube 频道的视频？
【发布时间】：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 服务器获取数据后尝试打印结果
不，我没有。我会尝试:)

标签： javascript jquery iframe

【解决方案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)

      });
    }
  );
}

【讨论】：