JavaScript - - By Sam Deering

Display YouTube Thumbnails Easy with jQuery

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


Small Thumb (start)


Small Thumb (after a minute or so of duration)



// Returns big screenshot by video id

// Returns small thumbnail by YouTube video URL
$.jYoutube('', 'small');

jQuery Code

  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 ""+vid+"/2.jpg";
    }else {
      return ""+vid+"/0.jpg";

Try it yourself

Submit YouTube link

Your YouTube video thumbs:


Login or Create Account to Comment
Login Create Account