在网站上嵌入最新的 YouTube 视频？答案

【问题标题】：Embed most recent YouTube videos on website?在网站上嵌入最新的 YouTube 视频？
【发布时间】：2017-05-09 22:51:39
【问题描述】：

我目前正在学习网络开发，并且我是 YouTube 上相当大的人的朋友，因此我提议免费为他创建一个网站，以便在我学习的同时建立我的作品集。我希望能够嵌入他最近的 8 个视频，但不知道该怎么做。

我在 SO 上找到了下面的代码，但它适用于 YouTube Data API V2，因此不再有效。我似乎找不到使用 API v3 的类似方法。干杯，

奥利。

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Recent Upload Thing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
    <script type="text/javascript">
        function showVideo(response) {
            if(response.data && response.data.items) {
                var items = response.data.items;
                if(items.length>0) {
                    var item = items[0];
                    var videoid = "http://www.youtube.com/embed/"+item.id;
                    console.log("Latest ID: '"+videoid+"'");
                    var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>"; 
                    $('#static_video').html(video);
                }
            }
        }
    </script>
    <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>

【问题讨论】：

标签： javascript html youtube

【解决方案1】：

如果您进行一些调整，您的代码可以正常工作。

首先，要获取最后 8 个视频，您需要在“查询 url”中包含该数字为 max-results：

                                                                 here
                                                                   ▼
https://gdata.youtube.com/feeds/api/users/VEVO/uploads?max-results=8&orderby=published&v=2&alt=jsonc&callback=showVideo

然后，要显示每个视频，而不是 if 语句，您需要有一个循环（此处为 for 循环），并在每个视频上 .append()，而不是每次都用 @987654326 替换整个内容@：

function showVideo(response) {
    if(response.data && response.data.items) {
        var items = response.data.items;
        // the loop i'm talking about
        for(var i=0, l=items.length; i<l; i++){
            var item = items[i];
            var videoid = "http://www.youtube.com/embed/"+item.id;
            console.log("Latest ID: '"+videoid+"'");
            var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
            // here, add the video to the container
            $('#static_video').append(video);
        }
    }
}

【讨论】：

谢谢。我正在尝试将每个视频添加到 ID 为“#static_video_0”、“#static_video_1”等的单独 div 中。我添加了 var divid = '#static_video_' + item; 并将 ID 更改为 $(divid)。这是我能想到的唯一方法，但它不起作用。还有其他方法吗？
对不起，我是愚蠢的。应该是'#static_video_' + i;。
@Perceptic 你明白了 :) 编辑：如果你有单独的容器，你可以坚持使用.html()，因为你不会覆盖任何现有的 iframe。但是.append() 也可以正常工作。

【解决方案2】：

这将嵌入您的“上传”播放列表。如果您想播放最新的视频，只需转到您的频道并按最新对上传的内容进行排序。代码如下：

<iframe src="https://www.youtube.com/embed/videoseries?list=UUB8OUG89o0QWqmJ2lfzdyIg" seamless allowfullscreen></iframe>

UUB8OUG89o0QWqmJ2lfzdyIg 是我个人上传播放列表的唯一 ID。要获取播放列表的唯一 ID，请获取您的唯一频道 ID，然后将 C 更改为 U。

UCB8OUG89o0QWqmJ2lfzdyIg // channel id
UUB8OUG89o0QWqmJ2lfzdyIg // uploads playlist id

所有的 Youtube 播放列表都有 id，你只需要找到它们。您也可以通过使用“全部播放”按钮播放完整播放列表来查找播放列表 ID。这将在 Youtube 上播放整个播放列表，您可以将 id 从页面 url 中复制出来。

【讨论】：