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

If you enjoyed this article, Get email updates (It’s Free)
Youtube Instant Search Plugin Using Jqueryhttp://w3lessons.info/wp-content/uploads/2012/05/youtube1271.jpghttp://w3lessons.info/wp-content/uploads/2012/05/youtube1271-150x150.jpgKarthikeyan KFreebiesjqueryJquery,jquery plugin,youtube instant
Hi guys, Today I am going to share how to search youtube videos instantly using a simple jquery ajax function Jquery Plugin CodeSimple Jquery codePlugin ConfigurationsNo of videos Video Height Video Width Loading text etcPlease don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are...