jQuery Plugin To Get & Display Youtube Thumbnails

A lightweight jQuery plugin which uses Youtube API V3 to get all the thumbnails of an Youtube video and display them will an image fallback on your webpage.

How to use it:

1. Link to the required JavaScript files.

<script src="jquery.min.js"></script>
<script src="jquery-youtubethumbnails.min.js"></script>

2. Create a DIV element to place the Youtube thumbnails.

<div class="video-thumbs">
  
</div>

3. Specify the API key & Youtube ID and append the best quality thumbnail to the DIV element.

$(document).YTthumbnail({

  // Specify the API key
  apiKey: 'YOUR API KEY',

  // Specify the video ID
  videoID: '-YGDyPAwQz0',
  callback: function(bestQuality, thumbnails) {
    // Add the best quality image
    $('.video-thumbs').append('<p>Best quality</p><img src="' + bestQuality.url + '" title="Best quality - Image size:' + bestQuality.width + 'x' + bestQuality.height + '">');
  }
  
});

4. Append all the Youtube thumbnails to the DIV element.

$(document).YTthumbnail({

  // Specify the API key
  apiKey: 'YOUR API KEY',

  // Specify the video ID
  videoID: '-YGDyPAwQz0',
  callback: function(bestQuality, thumbnails) {
    // Add the best quality image
    for (thumbnail in thumbnails) {
      $('.video-thumbs').append('<img src="' + thumbnails[thumbnail].url + '" title="Image size:' + thumbnails[thumbnail].width + 'x' + thumbnails[thumbnail].height + '">');
    }
  }

});

5. All the options with the defaults.

apiKey: false,//The API key
videoURL: null,//The video URL
videoID: null,//The video ID
minWidth: 320,//The minimum width for the thumbnail
minHeight: 180,//The minimum height for the thumbnail
fallbackImage: 'images/default.jpg',//The fallback image
callback: null,//The callback

---

This awesome jQuery plugin is developed by joshcronin. For more Advanced Usages, please check the demo page or visit the official website.