PreViewTube.js

PreViewTube.js is a small jQuery plugin for animating YouTube thumbnail images.

Source: github.com

1. INCLUDE JS FILES

<script src="path/to/jquery.min.js"></script>
<script src="path/to/previewtube.js"></script>

2. HTML

<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/2.jpg" alt="" title="" width="150" class="preViewTube"/>'

3. JAVASCRIPT

$(document).ready(function(){
        $('.preViewTube').PreViewTube();
});

4. OPTIONS

The plugin has two options mode and interval both are optional.

Interval: The animation rate in ms

Default: 500ms

Mode: How the animation should run constant or hover

Default : hover

A note on thumbnail size

YouTube creates 4 thumbnails, 3 of these are sized 120px x 90px (1.jpg, 2.jpg & 3.jpg) and 1 sized480px × 360px (0.jpg), because of this size difference it is important that the size is set on the imgtag.

Although it may be best to make this width="120" you can get away with make this a bit bigger, I found width="150" look ok.