Youtube v3 API search videos using jQuery

youtube v3 API search videos

First, you need youtube API KEY to start using youtube v3 API search videos API. If you don’t know how to get youtube API KEY please go through my article on how to get youtube API key/credentials.

Once you get the youtube API KEY, create an HTML file and place the below code inside the head tag.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

Then we need a search text box to input a search keyword after entering search keyword an ajax call will be made to pull the related keywords. Once you select a keyword from the suggestion keyword list it will call youtube API method to pull the videos for your search term. Below is the HTML code for the search box and to display search videos. Place this code inside the body tag.

<div id="main-container">
	<div class="search-container">
		<input type="text" name="suggesionBox" id="suggesionBox" class="search" autocomplete="off" /> 
		<button class="btn-icon-search"><i class="fa fa-search" aria-hidden="true"></i></button>
	</div>
	
	<div class="main-content">
		<div class="pagination">
			<input type="hidden" id="cpage" value="">
			<div>
				<button type="button" id="pagePrev" class="btn-prev">Prev</button>
			</div>
			<div>
				<button type="button" id="pageNext" value="" class="btn-next">Next</button>
			</div>
		</div>
		
		<div>
			<ul id="searchVideos"></ul>
		</div>
	</div>
</div>

Below is the jQuery code to load suggestion keyword list and to call youtube search videos API to pull the videos. Place this code before body close tag.

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function() {
 jQuery("#suggesionBox").autocomplete({
	source: function(req, rsp) {
		var formattedResponsealue = [];
		jQuery.ajax({
			type: "POST",
			url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q="+req.term,
			dataType: 'jsonp',
			success: function(data) {
				jQuery.each(data[1], function(key, value) {
					if(value[0]){
						formattedResponsealue.push(value[0]);
					}
				});
				rsp(formattedResponsealue);
		 }
	 });
	},
	select:function(evt,obj){
		callAPI(obj.item.value);
	}
 });
 
 function callAPI(searchTerm){
	 $.ajax({
		 cache: false,
		 data: $.extend({
			 key: 'AIzaSyBtulqn5WEszCH-H9Q5OFNluQPedW9VQp0',
			 q: searchTerm,
			 part: 'snippet',
			 chart: 'mostPopular'
		 }, {maxResults:10,pageToken:$("#cpage").val()}),
		 dataType: 'json',
		 type: 'GET',
		 timeout: 5000,
		 url: 'https://www.googleapis.com/youtube/v3/search'
	 })
	.done(function(resp) {
		var items = resp.items, videoContent = "";
		console.log(resp);
		$('.main-content').show();
		if (typeof resp.nextPageToken === "undefined") {
			$('#pageNext').attr("disabled",true);
		}
		if (typeof resp.prevPageToken === "undefined") {
			$('#pagePrev').attr("disabled",false);
		}
		$("#pageNext").val(resp.nextPageToken);
		$("#pagePrev").val(resp.prevPageToken);
		$.each(items, function(index,item) {
			console.log("item ",item.snippet.channelId);
			if(item.id.videoId)
			videoContent += '<li class="list-item"><div class="thumb"><span class="thumb-img"><a href="youtube-single-video.php?vid='+item.id.videoId+'"><img alt="'+item.snippet.title+'" src="'+item.snippet.thumbnails.default.url+'" width="120" height="90"></a></span></div><div class="video-content-box"><a href="youtube-related-videos.php?vid='+item.id.videoId+'"><span class="title">'+item.snippet.title+'</span></a><a><span class="channelTitle">by <span>'+item.snippet.channelTitle+'</span></span></a></div></li>';
		}); 
		$('#searchVideos').html(videoContent); 
	 });
}

	$("#pageNext").on( "click", function() {
		 $("#cpage").val($(this).val());
		 callAPI($('#suggesionBox').val());
	 });
	 $("#pagePrev").on( "click", function() {
		 $("#cpage").val($(this).val());
		 callAPI($('#suggesionBox').val());
	 });
	 $(".btn-icon-search").on( "click", function() {
		 callAPI($('#suggesionBox').val());
		 return false;
	 });
	 callAPI("most popular");	 
});
</script>

Please do comment for any help in the code. Also read my next article on Embed youtube video using youtube v3 API

Download / Demo

You may also like...