jQuery Plugin To Create Animated Youtube Thumbnails - PreViewTube.js

File Size: 15.4 KB
Views Total: 2336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Animated Youtube Thumbnails - PreViewTube.js

PreViewTube.js is a jQuery plugin that helps you create animated thumbnail images for Youtube Videos.

How to use it:

1. Load the jQuery PreViewTube.js plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="previewtube.js"></script>

2. Insert a thumbnail image into your document. Note that each YouTube video has 4 generated images. They are predictably formatted as follows:

  • https://i.ytimg.com/vi/VIDEO-ID/0.jpg
  • https://i.ytimg.com/vi/VIDEO-ID/1.jpg
  • https://i.ytimg.com/vi/VIDEO-ID/2.jpg
  • https://i.ytimg.com/vi/VIDEO-ID/3.jpg
<img src="https://i.ytimg.com/vi/08JRDC4-kug/2.jpg" width="150" class="preViewTube">

3. Call the PreViewTube() method on the image to enable the plugin.

$('.preViewTube').PreViewTube();

4. By default, you will see the plugin in action when you hover over the image. Here're a few options to customize the trigger event and animation speed.

$('.preViewTube').PreViewTube({

  // animation speed
  'interval' : 500,

  // 'hover' or 'constant'
  'mode' : 'hover'
  
});

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