Giter Club home page Giter Club logo

previewtube.js's Introduction

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 !

previewtube.js's People

Contributors

vool avatar

Stargazers

Baek Jinseok avatar Roman Murashov avatar Eugene Kopylov avatar maknaoui avatar Takis avatar  avatar George Siamidis avatar Alexander Khlebnikov avatar Paul Cookie avatar  avatar  avatar Guillermo Palafox avatar Chema avatar Alexey Volkov avatar Omar Dixon avatar ErickSkrauch avatar Oleg Stepura avatar Austris avatar Mixmode avatar  avatar Roman avatar Alexey Okhrimenko avatar  avatar Raymond Seger avatar  avatar Denis Gilè avatar Dmitry avatar Zaher Ghaibeh avatar Vahid Mohammad Taheri avatar Raphael Carlos Rego avatar maitokuwahara avatar  avatar Pedro Coutinho avatar Deives Fahl avatar Pablo avatar Eric Ting avatar

Watchers

Omar Dixon avatar  avatar  avatar James Cloos avatar  avatar

previewtube.js's Issues

Set video via data attribute

Add functionality to add video id via HTML data attribute. This would also allow the img src to contain a preload or loader image instead to the thumbnail image.

Add play icon

Add the option of having a play icon overlayed on the thumbnails

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.