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

Related Posts