Get new jQuery plugins just once a week

×

PreViewTube-js

May 18, 2015

PreViewTube-js | A small jQuery plugin for animating YouTube thumbnails

PreViewTube-js is a small jQuery plugin for animating YouTube thumbnails easily.

Created by Keith O’Faoláin

Download

Example

PreviewTube-js jQuery plugin

youtube thumbnails

PreViewTube.js

A small jQuery plugin for animating YouTube thumbnails.

Demo

previewtube.vool.ie

Download

You can install PreViewTube using Bower:

$ bower install previewtube

Or if you prefer just grab a copy of the script

Usage

  1. Include jQuery:

    
    
    
  2. Include plugin's code:

    <script src="path/to/previewtube.js"></script>
    
  3. Call the PreViewTube plugin:

    <script>
      $(document).ready(function(){
    
                    $('.preViewTube').PreViewTube();
    
                    // or
    
                    $('.preViewTube-constant').PreViewTube({
                        'interval' : 500,
                        'mode' : 'constant'
                    });
    
      });
    </script>
    
  4. Add some YouTube thumbnails:

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

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 sized 480px × 360px (0.jpg), because of this size difference it is important that the size is set on the img tag.

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.

ToDo

Could be improved, might get around to it someday, sharing it is a start eh !

PreViewTube-js

Related posts:

MediaElement js
prettyEmbed-js
Vide

To install using Bower
bower install previewtube

PreviewTube-js jQuery plugin

http://jquer.in/wp-content/uploads/2015/05/PreviewTube.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever