Coding with Eidham

Get Thumbnails and Title from Youtube Channel List with API v3

You can use following code to get information from Youtube channels to use in your web projects.

Firstly, you need to open a Google Developers Account and create a youtube API key in order to request information from youtube.

Secondly, you should get the List Id of your Channel which you want to get video information.

In this code, we requsted thumbnails and titles of the videos. You can use Google API website to learn other aspects you can gather from Youtube.


<div id="results">
<script>
 $( document ).ready(function() {
 getyoutubeVideos('channel-list-id');
 });
</script>
</div>

function getyoutubeVideos(lll) {

var yt_api_key = 'YOUR API KEY',
yt_video_id = lll,
yt_snippet_endpoint = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=" + yt_video_id + "&key=" + yt_api_key;		


	$.getJSON(yt_snippet_endpoint)
	  .done(function(data) {
	    getInfo(data);
	  })
	  .fail(function() {
	    console.log("Error");
	  });


	function getInfo(snippet_json_data){
	
	yt_list_info = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" + yt_video_id + "&key=" + yt_api_key;
	$.getJSON(yt_list_info)
	  .done(function(data2) {
	  	console.log(data2);

		var i;
		var video_quantity = 5; //How many videos you want to get from list
		for (i = 0; i < video_quantity; i++) {
		
		  var img = snippet_json_data.items[i].snippet.resourceId.videoId;
		  var title = snippet_json_data.items[i].snippet.title;
		  if (title != "Private video") {
		  	$("#results").prepend("<div><div class='video-shell'><div class='video-title'>"+title+"</div><a href='https://www.youtube.com/watch?v="+img+"' target='_blank'><img src='https://img.youtube.com/vi/"+img+"/0.jpg' width='100%'></a></div></div>");
		  }
		
	}


	  })
	  .fail(function() {
	    console.log("Error,");
	  });

	}
}