YouTube JSONC Search Using jQuery

In this post, i will explain How to build a YouTube JSON Search cum Video App. In this app, trending videos around the web would be displayed by default. Users can search for Videos using the search form. If you want to build a Search App without using jQuery, please read this article.

For an interactive demo about JSONC Click Here.

URL Construction

// Search Feed for keyword Hello

http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=Hello

//Trending Videos Feed

http://gdata.youtube.com/feeds/api/standardfeeds/on_the_web?v=2&alt=jsonc

In YouTube API we get duration in Seconds, but we want to convert sec to H:M:S format.
Code to convert seconds to H:M:S format is

if(duration) {
		
		//Initially we set hours,minutes and second all to zero
		hours = 0;
		minutes = 0;
		seconds = 0;
		//If duration > 3600 sec then we increase hour count
		// We increase count untill duration is less than 3600
		while(duration >= 3600) {
		hours = hours + 1;
	    duration = duration - 3600;
        }
		//suppose we have duration more than 60 sec then we increment minute count
		//We increase count untill duration is less than 60 sec
		while(duration >= 60) {
                    minutes = minutes + 1;
                    duration = duration - 60;
                  }
		seconds = duration;
		//if duration of video is less than 10 sec then we directly  write it in M:S
	    if(seconds < 10) {
		seconds = '0'+seconds;
					}
		//We store the duration in Variable Time 
		time = minutes+':'+seconds;
		if(hours > 0) {
		time = hours+':'+time;
			}
		}

Complete Source Code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YouTube Search</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
</head>
<style>
tml, body, div, ul {
	margin: 0;
	padding: 0;
}

body {
font-family: "Segoe UI", Tahoma, Verdana, Arial;
font-size:10px;
	color: #fff;
	background: transparent;
    padding:10px;
}

.nannuin
{
color:#fff;

}
#content {
	background:transparent;
     height:auto;
	padding:10px;
	font: normal 12px/18px Verdana, sans-serif;
	-moz-box-shadow: 0px 0px 10px #cbcbcb;
	-webkit-box-shadow: 0px 0px 10px #cbcbcb;

}
#content .latest {
		padding: 10px 20px 10px 0;
		margin-bottom: 10px;
	}
#content .latest h2 {
			font-size: 1.5em;
			padding-right: 90px;
			padding-bottom: 15px;
		}

		#content .latest p {
			font-size: 0.9em;
			margin-bottom: 12px;
			line-height: 1.4em;
		}
#content .single ul {
	margin: 0 0 10px 18px;
}

#content .single ol {
	margin: 0 0 10px 20px;
}

	#content .single li {
		padding: 2px 0;
		line-height: 1.4em;
	}

	#content .single h3 {
		margin-bottom: 5px;
		font-size: 1.4em;
		font-size: 1.5em;
		font-weight: normal;
	}
	.single .details {
		padding: 20px 0;
	}
	.single .details p {
		margin-bottom: 5px !important;
	}

#wrapper {
	text-align: left;
	width: 270px;
}

h1 {
	margin: 30px 0 15px 0;
	font-size: 30px;
	font-weight: bold;
	font-family: Arial;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}

.alignleft {
	float: left;
	margin: 4px 10px 5px 0;

}

.alignright {
	float: right;
	margin: 4px 0 5px 10px;

}

.hidden {

	display: none;

}

.noimage img {

	display: none;

}
a {

	text-decoration: none;

	color: #fff;

}

h1 span {
	font-size: 50%;
	letter-spacing: -0.05em;
}

hr {
	border: none;
	height: 1px; line-height: 1px;
	background: #E5E5E5;
	padding: 0;
}

p {
	margin: 0;
	padding: 7px 0;
}

a {
	outline: none;
}

a img {
	border: 1px solid #BBB;
	padding: 2px;
	margin: 10px 20px 10px 0;
	vertical-align: top;
}

a img.last {
	margin-right: 0;	
}

ul {
	margin-bottom: 24px;
	padding-left: 30px;
}
#content {
	padding-left:10px;
	clear: both;
	float: left;
	border-right: 1px solid #CCCCCC;
	width: 270px;
	//height:400px;
	padding:10px 10px 10px 10px;
    padding-left:15px;
    font-family:"Segoe UI", Tahoma, Verdana, Arial;
}
#con{
color:#fff;
}
#instantinput{
/*This CSS is an important part of project
We use Z index to show the suggest behind current text box.
*/
width:200px ;
height:35px;
position:absolute;
color:  #ccc;
z-index:-1;
 border:1px #000 double;
font-family: "Segoe UI", Tahoma, Verdana,  Arial;
font-size: 16px;
}

#input {
/* We make use of two input text box
one is readonly */
width:200px ;
height:35px;
color:  #000;
background:transparent;
border:none;
font-family:  "Segoe UI", Tahoma, Verdana, Arial;
 font-size: 16px;
}</style>
<body>
<p>
<script type="text/javascript"><!--
function searching()
{
	var text=$('#search').val();
var yurl='http://gdata.youtube.com/feeds/api/videos?q='+text+'&format=5&max-results=4&v=2&alt=jsonc&key=AI39si47aoxcLBAwU2xJOF947q1cduwa0d9sEAP_yoWvbh5-zhNU89jwff2IiDoicddKaaxu9q-6cz9TyaoB_dUlwULIV3uYxA'; 
$('#result').empty();
$.ajax
({type: "GET",url: yurl,dataType:"jsonp",success: function(response)
{

if(response.data.items)
{
$.each(response.data.items, function(i,data)
{      
	    if(data.duration) {
		duration =data.duration;
		//Initially we set hours,minutes and second all to zero
		hours = 0;
		minutes = 0;
		seconds = 0;
		//If duration > 3600 sec then we increase hour count
		// We increase count untill duration is less than 3600
		while(duration >= 3600) {
		hours = hours + 1;
	    duration = duration - 3600;
        }
		//suppose we have duration more than 60 sec then we increment minute count
		//We increase count untill duration is less than 60 sec
		while(duration >= 60) {
                    minutes = minutes + 1;
                    duration = duration - 60;
                  }
		seconds = duration;
		//if duration of video is less than 10 sec then we directly  write it in M:S
	    if(seconds < 10) {
		seconds = '0'+seconds;
					}
		//We store the duration in Variable Time 
		time = minutes+':'+seconds;
		if(hours > 0) {
		time = hours+':'+time;
			}
		}
        var title = '<div id=tile>'+data.title;
		var views ='<br />'+data.viewCount+' views</br>';
		var label = 'Label:- '+data.category =='undefined' ? 'undefined' : data.category;
		var duration = '</br> Duration:- '+time;
        var image  = "<img src = "+data.thumbnail.sqDefault+">";
		var vid =data.id;//Video id of Video
        var urlvalue = '<br /><a id="light" class="example6" href = "http://www.highesthits.com/video.php?v='+ vid + '" target="_blank">'+image;
        var plus= '<div class=nannuin><table><tr><td>'+ urlvalue+'</td><td>'+title+ views+label+duration+'</td></tr></table></div>';
        $(plus).appendTo('#result'); // Result

});
}
}
});
}
$(document).ready(function()
{
var yurl='http://gdata.youtube.com/feeds/api/standardfeeds/on_the_web?v=2&alt=jsonc&max-results=5&key=AI39si47aoxcLBAwU2xJOF947q1cduwa0d9sEAP_yoWvbh5-zhNU89jwff2IiDoicddKaaxu9q-6cz9TyaoB_dUlwULIV3uYxA'; 
$.ajax
({type: "GET",url: yurl,dataType:"jsonp",success: function(response)
{

if(response.data.items)
{
$.each(response.data.items, function(i,data)
{      
	    if(data.duration) {
		duration =data.duration;
		//Initially we set hours,minutes and second all to zero
		hours = 0;
		minutes = 0;
		seconds = 0;
		//If duration > 3600 sec then we increase hour count
		// We increase count untill duration is less than 3600
		while(duration >= 3600) {
		hours = hours + 1;
	    duration = duration - 3600;
        }
		//suppose we have duration more than 60 sec then we increment minute count
		//We increase count untill duration is less than 60 sec
		while(duration >= 60) {
                    minutes = minutes + 1;
                    duration = duration - 60;
                  }
		seconds = duration;
		//if duration of video is less than 10 sec then we directly  write it in M:S
	    if(seconds < 10) {
		seconds = '0'+seconds;
					}
		//We store the duration in Variable Time 
		time = minutes+':'+seconds;
		if(hours > 0) {
		time = hours+':'+time;
			}
		}
        var title = '<div id=tile>'+data.title;
		var views ='<br />'+data.viewCount+' views</br>';
		var label = 'Label:- '+data.category =='undefined' ? 'undefined' : data.category;
		var duration = '</br> Duration:- '+time;
        var image  = "<img src = "+data.thumbnail.sqDefault+">";
		var vid =data.id;//Video id of Video
        var urlvalue = '<br /><a id="light" class="example6" href = "http://www.highesthits.com/video.php?v='+ vid + '" target="_blank">'+image;
        var plus= '<div class=nannuin><table><tr><td>'+ urlvalue+'</td><td>'+title+ views+label+duration+'</td></tr></table></div>';
        $(plus).appendTo('#result'); // Result

});
}
}
});
});
// --></script>
</p>
<div id="con"><input id="search" type="text" /> <a href="#" onclick="searching();">Search</a>
<p>&nbsp;</p>
<div id="result"></div>
<p><a href="http://www.youtube.com" target="_blank">Powered by YouTube</a></p>
</div>
</body>
</html>

You Might Also Like