Skip to main content

Display YouTube Thumbnails Easy with jQuery

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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



jYoutube - jQuery YouTube plugin demo








Submit YouTube link

Your YouTube video thumbs:

Source

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.