nakome
12/10/2015 - 2:54 AM

YouTube Data API (v3) - Thumbnails

YouTube Data API (v3) - Thumbnails

body {
  font-family:Arial;
  font-size:13px;
  background:#f1f1f1;
}
h3 {
  color:#222;
  font-weight:normal;
}
#wrapper {
  width:1110px;
  margin:30px auto;
  
}
.item {
  background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  width:320px;
  height:240px;
  float:left;
  padding:14px;
  margin-right:20px;
  margin-bottom:20px;
}
.item:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.3);  
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//YouTube Data API V3: https://developers.google.com/youtube/v3/docs/
//Retrieve information of YouTube user's videos
//From that, make clickable thumbnails that take you to the
//YouTube video

//First Ajax Call
$.ajax({
  url:'https://www.googleapis.com/youtube/v3/channels',
  type:'GET',
  dataType:'json',
  data: {
    'part':'contentDetails',
    'forUsername': 'WatchMojo',
    'key': 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0'   
},
  success: function(data){
    var uploads = data.items[0].contentDetails.relatedPlaylists.uploads;
    getVideos(uploads);  
  }
});

//Use "uploads" value from previous ajax call to retrieve videos
function getVideos(uploads) {
var limit = 9;
//Second Ajax call
$.ajax({
  url:'https://www.googleapis.com/youtube/v3/playlistItems',
  type:'GET',
  dataType:'json',
  data: {
    'part':'snippet',
    'playlistId': uploads,
    'chart': 'mostPopular',
    'maxResults': limit,
    'key': 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0'   
},
  success: function(data){
    for(var i = 0; i<limit; i++){
      var title = $("<h3>").append(data.items[i].snippet.title);
      var thumb = $("<img>").attr("src",data.items[i].snippet.thumbnails.medium.url);
      var video_id = data.items[i].snippet.resourceId.videoId;
      var video_url = 'https://www.youtube.com/watch?v='+video_id;
      var link = $("<a target='_blank'>").attr("href",video_url).append(thumb);
      var holder = $("<div class='item'>").append(link,title);
      $("#youtube").append(holder);        
    }        
  }  
});    
}
<div id="wrapper">
  <div id="youtube"></div>
</div>

YouTube Data API (v3) - Thumbnails

A Pen by Juan on CodePen.

License.