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

时间:2020-05-05 14:38:36

标签: javascript jquery iframe

我在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>

1 个答案:

答案 0 :(得分:0)

在长期遭受痛苦之后,我自己解决了这个问题。我添加了一些代码。 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)

      });
    }
  );
}