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

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.