The instant search feature has massively changed the web in past couple of weeks. I had developed real-time Youtube instant search with Jquery and Ajax. It is very simple like my previous posts, just reading the Youtube API JSON file with Jquery. Take a look at this live demo
Download Script 
Live Demo Live DemoJavascript Code
$(".search_input").keyup(function(){})- search_input is the class name of input tag. $(this).val() - calling the input search box value. The encodeURIComponent() function encodes special characters (More infomation).
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
// IFRAME Embed for YouTube
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final); // Result
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
// IFRAME Embed for YouTube
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final); // Result
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>
Youtube JSON file
JSON file keyword : Twitter Oauth 9lessons
{
"apiVersion":"2.0",
"data":
{
"updated":"2010-09-29T12:44:49.913Z",
"totalItems":2,
"startIndex":1,
"itemsPerPage":1,
"items":[{
"id":"yhrbmUbF0IE",
"uploaded":"2010-02-23T18:21:03.000Z",
"updated":"2010-09-21T01:50:37.000Z",
"uploader":"9lessons",
"category":"Tech",
"title":"Twitter Oauth Connect",
"description":"labs.9lessons application to twitter oauth connect using PHP",
"tags":["PHP","twitter","Oauth"],
"thumbnail":
{
"sqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/hqdefault.jpg"
},
"player":
{
"default":"http://www.youtube.com/watch?v\u003dyhrbmUbF0IE&feature\u003dyoutube_gdata_player",
"mobile":"http://m.youtube.com/details?v\u003dyhrbmUbF0IE"},
"content":
{
"1":"rtsp://v6.cache2.c.youtube.cb3MM/0/0/0/video.3gp",
"5":"http://www.youtube.com/v/yhrbmUdata",
"6":"rtsp://v6.cache7.c.youtube.com/.3gp"
},
"duration":93,
"rating":3.0,
"likeCount":"1",
"ratingCount":2,
"viewCount":2481,
"favoriteCount":1,
"commentCount":1,
"accessControl":
{
"syndicate":"allowed",
"commentVote":"allowed",
"rate":"allowed",
"list":"allowed",
"comment":"allowed",
"embed":"allowed",
"videoRespond":"moderated"
}}
]
}
}
"apiVersion":"2.0",
"data":
{
"updated":"2010-09-29T12:44:49.913Z",
"totalItems":2,
"startIndex":1,
"itemsPerPage":1,
"items":[{
"id":"yhrbmUbF0IE",
"uploaded":"2010-02-23T18:21:03.000Z",
"updated":"2010-09-21T01:50:37.000Z",
"uploader":"9lessons",
"category":"Tech",
"title":"Twitter Oauth Connect",
"description":"labs.9lessons application to twitter oauth connect using PHP",
"tags":["PHP","twitter","Oauth"],
"thumbnail":
{
"sqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/default.jpg",
"hqDefault":"http://i.ytimg.com/vi/yhrbmUbF0IE/hqdefault.jpg"
},
"player":
{
"default":"http://www.youtube.com/watch?v\u003dyhrbmUbF0IE&feature\u003dyoutube_gdata_player",
"mobile":"http://m.youtube.com/details?v\u003dyhrbmUbF0IE"},
"content":
{
"1":"rtsp://v6.cache2.c.youtube.cb3MM/0/0/0/video.3gp",
"5":"http://www.youtube.com/v/yhrbmUdata",
"6":"rtsp://v6.cache7.c.youtube.com/.3gp"
},
"duration":93,
"rating":3.0,
"likeCount":"1",
"ratingCount":2,
"viewCount":2481,
"favoriteCount":1,
"commentCount":1,
"accessControl":
{
"syndicate":"allowed",
"commentVote":"allowed",
"rate":"allowed",
"list":"allowed",
"comment":"allowed",
"embed":"allowed",
"videoRespond":"moderated"
}}
]
}
}
CSS
body
{
background-color:#86c9ef;
color:#000;
font-family:'Georgia', Times New Roman, Times, serif
}
#result
{
background-color:#000;
margin-top:25px;
min-height:400px;
width:640px;
border:solid 10px #ffffff;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
#no
{
padding:30px;
font-size:24px;
color:#fff;
}
#title
{
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count
{
background-color:#fff;
text-align:left;
padding-top:8px;
}
{
background-color:#86c9ef;
color:#000;
font-family:'Georgia', Times New Roman, Times, serif
}
#result
{
background-color:#000;
margin-top:25px;
min-height:400px;
width:640px;
border:solid 10px #ffffff;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
#no
{
padding:30px;
font-size:24px;
color:#fff;
}
#title
{
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count
{
background-color:#fff;
text-align:left;
padding-top:8px;
}
Awesome man!!!! You rocks
superb tutorial..... hats off !
However, It would be more nice if the search results are more than one and i can select which video to play.
Cool script, bro.
However, it would have been much more cooler if you actually developed this a few weeks ago as Feross did so before you.
Great post! i`m try it tomorrow!! Tks for that!
Amazing script!
good job man!
Marvellous script and amazing.i liked it..
Great!!
Thats useful script. Thanks for sharing.
we can selective watch, what video want to look for us...
hohoho
thanks for tutor \m/
wow ! this is fantastic stuff Sri :)
ps : How you got the Youtube JSON ?
hi... really a great work, i searched your name srinivas tamada... no video found..... really a nice tutorials... i learnt a lot from your website...Thanks for sharing the valuable posts...
Nice tutorial on Youtube instant..i like this to try for myself and implement on my site..
great man, such a nice post
Have you seen Twitstant - search Twitter instantly!
http://www.twitstant.com
Love it!
Great work..
This Is Nice...!!!
How can you make it auto play?
i wud rather search on youtube
awesome dude.....keep up d gud work
amazing tutorial!!!
How to remove the search box and place the query inside the code?
Is this possible with PHP?
cool tutorial, easy even not knowing ajax very good! just a few lines of code! thanx!
Video autoplay just replace
src='http://www.youtube.com/embed/"+video_id+"'
to
src='http://www.youtube.com/v/"+video_id+"&autoplay=1'
its good script but dosent work with IE6 it will be great if you fiks thnks
Nice tutorial
But i want to know how can i get related videos in smaller size like we have in youtube at right side Can you help?
u r the best bro... Can you plz tell me how can we put own title on video , on video not on sidebars...
Yes... that's excellent ! I am going to add this feature to my website.
Thanks
i like the second livedemo. How can I do that?
thanks 4 this script
nice....even i created such script... :)
http://techeeforum.com
Seems if you type too fast the wrong results come back. Any fix for this? Add a slight delay?
i jus want to know that the duration of a video is coming in which time formats it is in seconds or in minutes i want them in minutes how to get that .........?
Nice!!! There is a way to retrieve the duration of the video? :)
Thank you for this tutorial!
Thanks..-
thanx for this tuterial plz tell how can i get the secand module
how can i use for google search web/images/videos?
Very Nice, thanks..... if possible to attach with relative Video List.
Hi,
do you also know how i can get the embedded URL?
With this URL the user can't save video's on his profiles.
Hi is possible to auto copy youtube video url?
Hi my friend!Vert good script!Its possible somehow to add option to auto copy youtube video url....i need it so badly for my project...thanks
Hi friend..nice script..helpd me a lot..But one more thing i need..just want a remove button for each video..
I have a question about the performance. As far as performance is concerned, Is it better to hit the api on server side and render output as HTML or hitting the api from client side and building the HTML in jquery ?
Note: page output will be cached on the server an so asp.net page cycle is not executed on every client request.