Youtube Instant Search with Jquery and Ajax
Wall Script
Follow Me:
Thursday, September 30, 2010

Youtube Instant Search with Jquery and Ajax

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

Youtube Instant Search

Download Script     Live Demo     Live Demo

Javascript 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>

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"
}}
]
}
}

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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


49 comments:

  1. 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.

    ReplyDelete
  2. 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.

    ReplyDelete
  3. Great post! i`m try it tomorrow!! Tks for that!

    ReplyDelete
  4. Thats useful script. Thanks for sharing.

    ReplyDelete
  5. we can selective watch, what video want to look for us...
    hohoho
    thanks for tutor \m/

    ReplyDelete
  6. wow ! this is fantastic stuff Sri :)

    ps : How you got the Youtube JSON ?

    ReplyDelete
  7. 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...

    ReplyDelete
  8. Nice tutorial on Youtube instant..i like this to try for myself and implement on my site..

    ReplyDelete
  9. great man, such a nice post

    ReplyDelete
  10. Have you seen Twitstant - search Twitter instantly!

    http://www.twitstant.com

    Love it!

    ReplyDelete
  11. How can you make it auto play?

    ReplyDelete
  12. i wud rather search on youtube

    ReplyDelete
  13. awesome dude.....keep up d gud work

    ReplyDelete
  14. How to remove the search box and place the query inside the code?

    ReplyDelete
  15. cool tutorial, easy even not knowing ajax very good! just a few lines of code! thanx!

    ReplyDelete
  16. Video autoplay just replace

    src='http://www.youtube.com/embed/"+video_id+"'

    to

    src='http://www.youtube.com/v/"+video_id+"&autoplay=1'

    ReplyDelete
  17. its good script but dosent work with IE6 it will be great if you fiks thnks

    ReplyDelete
  18. 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?

    ReplyDelete
  19. u r the best bro... Can you plz tell me how can we put own title on video , on video not on sidebars...

    ReplyDelete
  20. Yes... that's excellent ! I am going to add this feature to my website.

    Thanks

    ReplyDelete
  21. i like the second livedemo. How can I do that?

    ReplyDelete
  22. thanks 4 this script

    ReplyDelete
  23. nice....even i created such script... :)
    http://techeeforum.com

    ReplyDelete
  24. Seems if you type too fast the wrong results come back. Any fix for this? Add a slight delay?

    ReplyDelete
  25. 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 .........?

    ReplyDelete
  26. Nice!!! There is a way to retrieve the duration of the video? :)
    Thank you for this tutorial!

    ReplyDelete
  27. thanx for this tuterial plz tell how can i get the secand module

    ReplyDelete
  28. how can i use for google search web/images/videos?

    ReplyDelete
  29. Very Nice, thanks..... if possible to attach with relative Video List.

    ReplyDelete
  30. 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.

    ReplyDelete
  31. Hi is possible to auto copy youtube video url?

    ReplyDelete
  32. 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

    ReplyDelete
  33. Hi friend..nice script..helpd me a lot..But one more thing i need..just want a remove button for each video..

    ReplyDelete
  34. 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.

    ReplyDelete
  35. Thanks. This was very helpful. I was about to use keyword search using back-end this made my life easier.

    ReplyDelete
  36. Nice work man...Can u plz tel me how to arrange the video received according to relevance
    I tried this but is isn't working
    var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+ keyword +'&format=5&max-results=5&orderby=relevance&v=2&alt=jsonc';

    ReplyDelete
  37. Hi, get video keywords code ?

    ReplyDelete
  38. superb code..... Can u plz tell me How to save yt_url,video_id variable in mysql database

    ReplyDelete

Make in India