Skip to content

vool/PreViewTube.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

<script src="path/to/jquery.min.js"></script>
```
  1. Include plugin's code:

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

    <script>
      $(document).ready(function(){
      
      				$('.preViewTube').PreViewTube();
    				
    				// or
    
    				$('.preViewTube-constant').PreViewTube({
    					'interval' : 500,
    					'mode' : 'constant'
    				});
    
      });
    </script>
  3. 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 !

About

A jQuery plugin for animating YouTube thumbnails

Resources

License

Stars

Watchers

Forks

Packages

No packages published