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>