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>紅毛港文化園區</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">
    
    // Get Uploads Playlist
    $.get(
       "https://www.googleapis.com/youtube/v3/channels",{
       part : 'contentDetails', 
       forUsername : 'hongmaogang',
       key: '你自己的憑證金鑰'},
       function(data) {
          $.each( data.items, function( i, item ) {
              pid = item.contentDetails.relatedPlaylists.uploads;
              getVids(pid);
          });
      }
    );
​
    //Get Videos
    function getVids(pid){
        $.get(
            "https://www.googleapis.com/youtube/v3/playlistItems",{
            part : 'snippet', 
            maxResults : 50,
            playlistId : pid,
            key: '你自己的憑證金鑰'},
            function(data) {
                var results;
                $.each( data.items, function( i, item ) {
                    results = '<a href="https://youtu.be/' + item.snippet.resourceId.videoId + '" target="_blank"><img src="' + item.snippet.thumbnails.high.url + '" /><br />'+ item.snippet.title + '</a><br /><br />';
                    $('#VideoThumbs').append(results);
                });
            }
        );
    }
​
    </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers