Friday, May 15, 2009

jYouTube - jQuery YouTube Thumbnail plugin. Gets any YouTube video’s image/thumbnail

Writing short scripts and jQuery tips on Fridays became some kind of habit. So this Friday I will give you a small jQuery utility function that will give you a way to get any YouTube video’s still image or in other words any YouTube video’s thumbnail. All you need to know is that YouTube video’s URL address or at least video’s YouTube ID.

Couple of months ago I wrote a javascript function that does just that, gets YouTube video’s thumbnail. Today, I am rewriting that code as a jQuery utility function and releasing it as jQuery plugin called jYouTube.

Download jQuery Youtube plugin - jYouTube

So here is the final jQuery YouTube plugin code:

$.extend({
  jYoutube: function( url, size ){
    if(url === null){ return ""; }

    size = (size === null) ? "big" : size;
    var vid;
    var results;

    results = url.match("[\\?&]v=([^&#]*)");

    vid = ( results === null ) ? url : results[1];

    if(size == "small"){
      return "http://img.youtube.com/vi/"+vid+"/2.jpg";
    }else {
      return "http://img.youtube.com/vi/"+vid+"/0.jpg";
    }
  }
});

It takes any YouTube video URL or video ID as first parameter and thumbnail size (big or small) as the second parameter. Utility returns that video’s screenshot URL.

Here is how you use jYouTube plugin in your own code:

// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');

// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

0 comments:

Post a Comment