https://github.com/vool/PreViewTube.js

A jQuery plugin for animating YouTube thumbnails
https://github.com/vool/PreViewTube.js

Last synced: about 2 months ago
JSON representation

A jQuery plugin for animating YouTube thumbnails

• Host: GitHub
• URL: https://github.com/vool/PreViewTube.js
• Owner: vool
• License: mit
• Created: 2015-04-23T21:57:15.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-06-16T09:10:32.000Z (over 1 year ago)
• Last Synced: 2024-07-17T09:08:06.802Z (2 months ago)
• Language: HTML
• Homepage: http://previewtube.vool.ie/
• Size: 17.6 KB
• Stars: 36
• Watchers: 5
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PreViewTube.js

A small jQuery plugin for animating YouTube thumbnails.

## Demo

[previewtube.vool.ie](http://previewtube.vool.ie)

## Download

You can install PreViewTube using Bower:

``$ bower install previewtube``

Or if you prefer just grab a copy of [the script](https://raw.githubusercontent.com/vool/PreViewTube.js/master/previewtube.js)

## Usage

1. Include jQuery:

	```html

	```

2. Include plugin's code:

	```html

	

	```

3. Call the PreViewTube plugin:

	```html

	

	  $(document).ready(function(){

	  

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

					

					// or

	

					$('.preViewTube-constant').PreViewTube({

						'interval' : 500,

						'mode' : 'constant'

					});

	

	  });

	

	```

3. Add some YouTube thumbnails:

	```html

	'

	```

## Options

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

#### Interval 

The animation rate in `ms`  

Default: `500`ms

#### 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 !