Youtube Instant Search Jquery Plugin

Hi guys, Today I am going to share how to search youtube videos instantly using a simple jquery ajax function

Jquery Plugin Code

(function( $ ) {

$.fn.YoutubeVideo = function (pars) {

 var feeddiv = $(this);

 var pubdt;

 $(this).html("<center>"+pars.loadingtext+"</center>");

 $.ajax({type:"GET",url:pars.feedurl+"&max-results="+pars.count,dataType:"jsonp",success:function(yt_data){

 feeddiv.html('');

 $.each(yt_data.data.items,function(i,entry){

 var video_id=entry.id;

 var video_frame="<iframe width='"+pars.width+"' height='"+pars.height+"' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";

 pubdt=new Date(entry.updated);

 feeddiv.append('<div class="frame">');

 feeddiv.append('<div class="ItemTitle">'+entry.title+' - <span class="ItemDate">'+pubdt.toLocaleDateString()+'</span></div>');

 feeddiv.append('<div class="video">'+video_frame+'</div>');

 feeddiv.append('</div>');

 }) }

 });

}})( jQuery );// JavaScript Document

Simple Jquery code

$('#video_loader').YoutubeVideo({

 feedurl:'http://gdata.youtube.com/feeds/api/videos?q='+s_text+'&v=2&format=5&alt=jsonc', // your rss feed url here...

 count:'5', // total no of videos

 height:'259', //video height

 width:'450', //video width

 loadingtext:'fetching videos from youtube' //loading text...

});

Plugin Configurations

1. No of videos
2. Video Height
3. Video Width
4. Loading text etc

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download