在網站上嵌入最新的YouTube視頻？

我目前正在學習網絡開發，並且我是YouTube上相當大的人的朋友，所以我提出爲他創建一個免費的網站，以便在我學習時構建我的投資組合。我期待能夠嵌入他最近的8個視頻，但不知道如何去做。在網站上嵌入最新的YouTube視頻？

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

來源

2015-03-08 Perceptic

如果您進行一些調整，則您的代碼正常工作。

第一，得到最後的8個視頻，你需要包括這個數字在你的「查詢網址」爲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()每個視頻，而不是每次用.html()替換整個內容：

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); 
     } 
    } 
}

來源

2015-03-08 20:10:11 blex

謝謝。我試圖將每個視頻添加到ID爲'＃static_video_0'，'＃static_video_1'等的單獨的div中。我添加了'var divid ='#static_video_'+ item;'並將ID更改爲'$（divid ）'。這是我能想到做到這一點的唯一方式，但它不起作用。有另一種方法嗎？ – Perceptic 2015-03-08 20:28:15

對不起，我當時很蠢。應該是''#static_video_'+ i;'。 – Perceptic 2015-03-08 20:31:32

@Perceptic你得到它:) **編輯**：如果你有獨立的容器，你可以堅持'.html（）'，因爲你不會覆蓋任何現有的iframe。但'.append（）'也可以正常工作。 – blex 2015-03-08 20:32:45

這將嵌入您的「上傳」播放列表。如果您想要播放最新的視頻，只需轉到您的頻道，然後按最近的時間對您的上傳進行排序。下面的代碼：

<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從網頁網址中複製出來。

來源

2017-05-09 14:51:39 Frank

在網站上嵌入最新的YouTube視頻？

回答

相關問題