Youtube Instant Search with Jquery and Ajax
Wall Script
Wall Script
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;
}
web notification

49 comments:

  1. K'$h@vSeptember 30, 2010 at 6:31 AM

    Awesome man!!!! You rocks

    ReplyDelete
  2. dskanthSeptember 30, 2010 at 8:39 AM

    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
  3. NabilSeptember 30, 2010 at 9:41 AM

    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
  4. Lucas SchirmSeptember 30, 2010 at 12:47 PM

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

    ReplyDelete
  5. AnonymousSeptember 30, 2010 at 2:36 PM

    Amazing script!

    ReplyDelete
  6. UnknownOctober 1, 2010 at 6:04 AM

    good job man!

    ReplyDelete
  7. cost of enterprise mobility solutionsOctober 1, 2010 at 6:28 AM

    Marvellous script and amazing.i liked it..

    ReplyDelete
  8. KarthikOctober 1, 2010 at 11:07 AM

    Great!!

    ReplyDelete
  9. Web DevelopmentOctober 1, 2010 at 2:01 PM

    Thats useful script. Thanks for sharing.

    ReplyDelete
  10. Beben KobenOctober 5, 2010 at 9:23 AM

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

    ReplyDelete
  11. JaazOctober 11, 2010 at 5:46 AM

    wow ! this is fantastic stuff Sri :)

    ps : How you got the Youtube JSON ?

    ReplyDelete
  12. madhuOctober 11, 2010 at 2:15 PM

    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
  13. EchoBloggerOctober 16, 2010 at 4:29 AM

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

    ReplyDelete
  14. jogeshOctober 20, 2010 at 11:12 AM

    great man, such a nice post

    ReplyDelete
  15. jonOctober 25, 2010 at 11:19 PM

    Have you seen Twitstant - search Twitter instantly!

    http://www.twitstant.com

    Love it!

    ReplyDelete
  16. Technical AmitNovember 22, 2010 at 4:02 AM

    Great work..

    ReplyDelete
  17. UnknownDecember 19, 2010 at 3:23 PM

    This Is Nice...!!!

    ReplyDelete
  18. AnonymousDecember 28, 2010 at 12:04 AM

    How can you make it auto play?

    ReplyDelete
  19. AnonymousJanuary 22, 2011 at 12:04 PM

    i wud rather search on youtube

    ReplyDelete
  20. AnonymousJanuary 26, 2011 at 7:01 AM

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

    ReplyDelete
  21. UnknownFebruary 16, 2011 at 3:07 PM

    amazing tutorial!!!

    ReplyDelete
  22. AnonymousFebruary 17, 2011 at 5:38 PM

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

    ReplyDelete
  23. UnknownFebruary 19, 2011 at 8:20 AM

    Is this possible with PHP?

    ReplyDelete
  24. kovpackFebruary 19, 2011 at 9:41 AM

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

    ReplyDelete
  25. Srinivas TamadaFebruary 21, 2011 at 6:17 AM

    Video autoplay just replace

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

    to

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

    ReplyDelete
  26. AnonymousMarch 17, 2011 at 2:59 PM

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

    ReplyDelete
  27. AnonymousMarch 17, 2011 at 3:16 PM

    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
  28. AnonymousMarch 17, 2011 at 11:56 PM

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

    ReplyDelete
  29. Web 2.0April 8, 2011 at 11:41 AM

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

    Thanks

    ReplyDelete
  30. AnonymousApril 29, 2011 at 3:12 AM

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

    ReplyDelete
  31. AnonymousOctober 5, 2011 at 12:55 AM

    thanks 4 this script

    ReplyDelete
  32. Himanshu JajuNovember 21, 2011 at 4:50 AM

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

    ReplyDelete
  33. Mike MalloyJanuary 19, 2012 at 12:10 PM

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

    ReplyDelete
  34. rohitMarch 1, 2012 at 12:49 AM

    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
  35. lynMarch 4, 2012 at 12:39 PM

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

    ReplyDelete
  36. sanathApril 10, 2012 at 2:30 AM

    Thanks..-

    ReplyDelete
  37. AnonymousMay 5, 2012 at 5:37 PM

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

    ReplyDelete
  38. cemilJuly 31, 2012 at 5:58 AM

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

    ReplyDelete
  39. onthdayJuly 31, 2012 at 6:37 AM

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

    ReplyDelete
  40. V-webdesignAugust 21, 2012 at 8:55 AM

    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
  41. demludiNovember 13, 2012 at 12:13 PM

    Hi is possible to auto copy youtube video url?

    ReplyDelete
  42. demludiNovember 13, 2012 at 12:16 PM

    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
  43. AnonymousDecember 28, 2012 at 1:47 AM

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

    ReplyDelete
  44. rimiFebruary 7, 2013 at 4:10 AM

    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
  45. AnonymousMarch 11, 2014 at 6:19 AM

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

    ReplyDelete
  46. UnknownMay 6, 2014 at 7:56 AM

    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
  47. UnknownSeptember 16, 2014 at 7:11 AM

    amazing!

    ReplyDelete
  48. AnonymousSeptember 29, 2014 at 5:26 PM

    Hi, get video keywords code ?

    ReplyDelete
  49. AnonymousFebruary 20, 2015 at 7:07 AM

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

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X