Skip to content
A simple jQuery youtube gallery plugin
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
README.md
jquery.spidochetube.js
jquery.spidochetube.min.js

README.md

SpidocheTube 3

A simple jQuery youtube gallery plugin

Project website : http://tube.spidoche.com

DEMO

INSTALL

HTML

Add a div with an id of your choice inside the <body></body> (we'll use id="youtube" in our example)

<div id="youtube"></div>

JAVASCRIPT

  1. If not already inculde, add jQuery inside the head tag
  2. Then add spidochetube.js
  3. Finally initialize the plugin with at least the 2 required parameter : the youtube api KEY and the playlist ID
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.spidochetube.js"></script>
<script>
    jQuery(function($){
        $('#youtube').spidochetube({
            key         : '[MY YOUTUBE API KEY]',
            id          : 'UU_x5XG1OV2P6uZZ5FSM9Ttw', // add the youtube playlist id of your choice
        });
    })
</script>

THEMES

This step is NOT required, you can easily add your own CSS to match your website design

To use the spidocheTube premade skins, follow the instructions below

Minimal theme install

Add the CSS
<link rel="stylesheet" href="css/minimal.css" />

Beginner tips: do not forget to change the path of the css file to match your project directory tree

Update the js options settings
<script>
jQuery(function($){
    $('#youtube').spidochetube({
        key             : '[MY YOUTUBE API KEY]',
        id              : 'UU_x5XG1OV2P6uZZ5FSM9Ttw',
        max_results     : 20,
        paging          : 'loadmore',
        scroll_duration : 500
    });
})
</script>

Darkscroll theme install

Add the CSS
<link rel="stylesheet" href="css/darkscroll.css" />

Beginner tips: do not forget to change the path of the css file to match you project directory tree

Add niceScroll library

For this theme you need to include an additional jQuery plugin call niceScroll from inuyaksa

  1. Download niceScroll from https://github.com/inuyaksa/jquery.nicescroll and add it to your js folder
  2. Then Add inside the head tag <script src="js/jquery.nicescroll.min.js"></script>

These script is little heavy but is very simple too install, and it's work on any browser (ie7 include)

Update the js options settings
<script>
jQuery(function($){
    $('#youtube').spidochetube({
        key         : '[MY YOUTUBE API KEY]',
        id          : 'UU_x5XG1OV2P6uZZ5FSM9Ttw',
        max_results : 8,
        complete: function(){
            // Initialize the scroll plugin after the playlist is ready
            $('#spidochetube_list').niceScroll({cursorcolor:'#666', cursorborder:'0px solid #fff',autohidemode:false});
        }
    });
});
</script>

OPTIONS

Name Type Default value Options available Description
key string 'none'   Add your youtube API key , get one on the google dev console
id string 'UU_x5XG1OV2P6 uZZ5FSM9Ttw'   Your playlist id, it's can be a user playist id or a user last entries playlist if no argument submit spidochetube will display the last google devlopper channel entries How to find a playlist id?
max_results integer 10 1 to 50 50 results per page/load maximum (youtube api limitation)
autoplay boolean false true Set to true if you want to autoplay the videos
scroll_duration Interger 0   The speed of the scroll animation after clicking on a video item, useful if you have a long list on videos and the player on the top
complete function     Callback function fire after list is loaded

CHANGE LOG

v 3.1 (thanks to @SebastienGicquel)

  • Update to jQuery 3
  • Fix https issue

v 3.0

  • spidochetube 3 initial release
You can’t perform that action at this time.