JavaScript
Article

Display YouTube Thumbnails Easy with jQuery

By Sam Deering

You may not know but youTube takes screenshots of the videos you upload, there are usually 2 main images (one big thumbnail and 1 small thumbnail). Here is how you can display YouTube Video thumbs on your webpage.

YouTube URLs

The urls are in this format (the v param is what we need):

YouTube Thumbs

Big Thumb

480×360
http://img.youtube.com/vi/dXo0LextZTU/0.jpg

Small Thumb (start)

128×96
http://img.youtube.com/vi/dXo0LextZTU/1.jpg

Small Thumb (after a minute or so of duration)

128×96
http://img.youtube.com/vi/dXo0LextZTU/2.jpg

Usage

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

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

jQuery 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";
    }
  }
});

Try it yourself












Submit YouTube link

Your YouTube video thumbs:

Source

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.