W3 Tweaks developed the YouTube Search V3 API tutorial and demo for the user. So here we have covered YouTube search autocomplete suggestion API and YouTube Video search API. We already have separate tutorial for search suggestion with basic implementation. From this tutorial user can easily understand merging both API in single demo. YouTube pagination also implemented user can find the demo and download instent youtube search code below

YouTube Video Search V3 API Demo Screenshot

Ok we can start our tutorial. Below YouTube video search tutorial will explain how to work with Jquery plugin and YouTube V3 API.

Include 3rd party dependency JavaScript and CSS.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-2.1.4.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js" type="text/javascript"></script>

In above dependency files, jQuery UI is used for search input box.

And include the below CSS file to get youtube like theme. If you want to modify the style you are good to go because this is developed by w3 Tweaks.

<link rel="stylesheet" href=”http://w3tweaks.com/demo/youtube_search_videos/maincss.css” type="text/css">

Note: Advice to download the “maincss.css” locally

CSS Code

Below CSS style will bring YouTube like search box. Include the below code inside html header

<style type="text/css">
	 body{
	 	background-color: #efefef;
	 }
	 .container-4 input#hyv-search {
		 width: 500px;
		 height: 30px;
		 border: 1px solid #c6c6c6;
		 font-size: 10pt;
		 float: left;
		 padding-left: 15px;
		 -webkit-border-top-left-radius: 5px;
		 -webkit-border-bottom-left-radius: 5px;
		 -moz-border-top-left-radius: 5px;
		 -moz-border-bottom-left-radius: 5px;
		 border-top-left-radius: 5px;
		 border-bottom-left-radius: 5px;
	 }
	 .container-4 button.icon {
		 height: 30px;
		 background: #f0f0f0 url('images/searchicon.png') 10px 1px no-repeat;
		 background-size: 24px;
		 -webkit-border-top-right-radius: 5px;
		 -webkit-border-bottom-right-radius: 5px;
		 -moz-border-radius-topright: 5px;
		 -moz-border-radius-bottomright: 5px;
		 border-top-right-radius: 5px;
		 border-bottom-right-radius: 5px;
		 border: 1px solid #c6c6c6;
		 width: 50px;
		 margin-left: -44px;
		 color: #4f5b66;
		 font-size: 10pt;
	 }
 </style>

Note: Find the search icon in download pack

HTML Code

<div class="row-fluid">
	 <main id="content" role="main" class="span12">
		<!-- Begin Content -->
		<div id="hyv-page-container" style="clear:both;">
			 <div class="hyv-content-alignment">
				 <div id="hyv-page-content" class="" style="overflow:hidden;">
					 <div class="container-4">
						 <form action="" method="post" name="hyv-yt-search" id="hyv-yt-search">
						 	<input type="search" name="hyv-search" id="hyv-search" placeholder="Search..." class="ui-autocomplete-input" autocomplete="off">
						 	<button class="icon" id="hyv-searchBtn"></button>
						 </form>
					 </div>
					 <div>
						 <input type="hidden" id="pageToken" value="">
						 <div class="btn-group" role="group" aria-label="..."  style="display:none;">
							 <button type="button" id="pageTokenPrev" value="" class="btn btn-default">Prev</button>
							 <button type="button" id="pageTokenNext" value="" class="btn btn-default">Next</button>
						 </div>
					 </div>
					 <div id="hyv-watch-content" class="hyv-watch-main-col hyv-card hyv-card-has-padding">
						 <ul id="hyv-watch-related" class="hyv-video-list">
						 </ul>
					 </div>
					
					 <!-- Ads width 300px holder start -->
					 <div id="hyv-watch-sidebar-ads" style="float:left;">
						 <div id="hyv-watch-channel-brand-div" class="">
							 <div id="hyv-watch-channel-brand-div-text">Advertisement</div>
							 <div class="hyv-watch-sidebar-section">
								 <div style="font-weight:bold;height:10px;">JSON Responce</div>
								 <div class="hyv-watch-sidebar-body"></div>
							 </div>
						 </div>
					 </div>
					 <!-- Ads width 300px holder end -->
				 </div>
			 </div>
		 </div>
	 </main>
 </div>
 

JavaScript Code

Below JavaScript code for YouTube Search autocomplete suggestion API

 $(document).ready(function() {
	 $("#pageTokenNext").on( "click", function( event ) {
		 $("#pageToken").val($("#pageTokenNext").val());
		 youtubeApiCall();
	 });
	 $("#pageTokenPrev").on( "click", function( event ) {
		 $("#pageToken").val($("#pageTokenPrev").val());
		 youtubeApiCall();
	 });
	 $("#hyv-searchBtn").on( "click", function( event ) {
		 youtubeApiCall();
		 return false;
	 });
	 jQuery( "#hyv-search" ).autocomplete({
		 source: function( request, response ) {
			 //console.log(request.term);
			 var sqValue = [];
			 jQuery.ajax({
				 type: "POST",
				 url: "http://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1",
				 dataType: 'jsonp',
				 data: jQuery.extend({
				 q: request.term
				 }, { }),
				 success: function(data){
					 console.log(data[1]);
					 obj = data[1];
					 jQuery.each( obj, function( key, value ) {
						 sqValue.push(value[0]);
					 });
					 response( sqValue);
				 }
			 });
		 },
		 select: function( event, ui ) {
		 setTimeout( function () { 
		 youtubeApiCall();
		 }, 300);
		 }
	 }); 
});

Below JavaScript function will pull the YouTube videos from YouTube Search V3 API

function youtubeApiCall(){
 $.ajax({
	 cache: false,
	 data: $.extend({
		 key: 'API_KEY',
		 q: $('#hyv-search').val(),
		 part: 'snippet'
	 }, {maxResults:20,pageToken:$("#pageToken").val()}),
	 dataType: 'json',
	 type: 'GET',
	 timeout: 5000,
	 url: 'https://www.googleapis.com/youtube/v3/search'
 })
.done(function(data) {
	$('.btn-group').show();
	 if (typeof data.prevPageToken === "undefined") {
	 	$("#pageTokenPrev").hide();}else{$("#pageTokenPrev").show();
	 }
	 if (typeof data.nextPageToken === "undefined") {
	 	$("#pageTokenNext").hide();}else{$("#pageTokenNext").show();
	 }
	 var items = data.items, videoList = "";
	 $("#pageTokenNext").val(data.nextPageToken);
	 $("#pageTokenPrev").val(data.prevPageToken);
	 $.each(items, function(index,e) {
		 videoList = videoList + '<li class="hyv-video-list-item"><div class="hyv-content-wrapper"><a href="" class="hyv-content-link" title="'+e.snippet.title+'"><span class="title">'+e.snippet.title+'</span><span class="stat attribution">by <span>'+e.snippet.channelTitle+'</span></span></a></div><div class="hyv-thumb-wrapper"><a href="" class="hyv-thumb-link"><span class="hyv-simple-thumb-wrap"><img alt="'+e.snippet.title+'" src="'+e.snippet.thumbnails.default.url+'" width="120" height="90"></span></a></div></li>';
	 });
	 $("#hyv-watch-related").html(videoList);
	 // JSON Responce to display for user
	 new PrettyJSON.view.Node({
		 el:$(".hyv-watch-sidebar-body"), 
		 data:data
	 });
 });
}

Note: Replace API_KEY with your YouTube API Key

Without video duration

Download Demo

With video duration

Download Demo

Tutorial: Open Dynamic Youtube Videos in fancybox or Modal window or lightbox

Advertisement

Google Matched Content...