Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Youtube Data API</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head> 
​
<body> 
    <div id="VideoThumbs"><!-- 這裡會產生YouTube Thumbs列出影片 --></div>
    
    <script type="text/javascript">
​
        var apiKey = "AIzaSyCIlwa-7d7qpKS0Nj5vhI7tb-0minC-qZ8";
​
        function getVideos(pid, apiKey) {
            // PlaylistItems: list 語法參見 https://developers.google.com/youtube/v3/docs/playlistItems/list
            $.get("https://www.googleapis.com/youtube/v3/playlistItems", {
                part: "snippet,contentDetails",
                maxResults: 50,
                playlistId: pid,
                key: apiKey},
                function (data) {
                    document.getElementById("VideoThumbs").innerHTML += '<div style="color:red;">====================================================================================================================================================</div>';
                    // 傳回值參見 https://developers.google.com/youtube/v3/docs/playlistItems#resource-representation
                    $.each(data.items, function (i, item) {
                        var str = '<div style="float:left;font-size:small;margin:5px;">';
                        str += '<a href="https://youtu.be/' + item.snippet.resourceId.videoId + '" target="_blank"><img src="' + item.snippet.thumbnails.medium.url + '" /><br />' + item.snippet.title + '</a><br />';
                        if (item.contentDetails.note !== undefined) str += '<a href="' + item.contentDetails.note + '" target="_blank">延伸閱讀</a><br />';
                        str += '</div>';
                        document.getElementById("VideoThumbs").innerHTML += str;
                    })
                }
            );
        }
        
        getVideos("PLZpe6ObhwpBAbtY45aSZZu3dAtBpMb-Dl", apiKey) // @解痛伸展操
        getVideos("PLZpe6ObhwpBCWOgjKNJG4OY6Ln5sj9isA", apiKey) // @樂齡健康操
        getVideos("PLZpe6ObhwpBBciBAYFWtEyj-zpd-0grQ-", apiKey) // @健走運動
        getVideos("PLZpe6ObhwpBDF8CqMgYIM1ukS4Y0QOFal", apiKey) // @跑步運動 
        getVideos("PLZpe6ObhwpBCsi2RzQh_FHk1PdJI0hFnd", apiKey) // @跑步用品 
        getVideos("PLZpe6ObhwpBCsi2RzQh_FHk1PdJI0hFnd", apiKey) // @跑步科學  
    </script>   
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers