ColorTube is a Javascript plugin that will change the background color or class of an element in sync with a YouTube video.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
dist
src
test
.gitignore
LICENSE.txt
README.md
build.xml

README.md

#ColorTube

ColorTube is a Javascript plugin that will change the background color or class of an element in sync with a YouTube video.

##Usage

Include the following in the <head> of your document:

<script type="text/javascript" src="dist/swfobject.js"></script>
<script type="text/javascript" src="dist/colortube.min.js"></script>

(Note: This plugin relies on swfobject and must be included before ColorTube)

To initialize the plugin, add the following to your document:

<script type="text/javascript">
	ColorTube.init({
		opts...
	});
</script>

##Configuration

There are a number of configurable aspects of this plugin.

###Autoplay

The autoplay variable operates the same as the autoplay variable in embedded YouTube video URLs:

ColorTube.init({
	autoplay: 1 //Autoplay on
	autoplay: 0 //Autoplay off (default)
});

###Breaks

breaks will set the breakpoints of the video when you would like changes to happen. Give the values as decimal seconds:

break: [0, 3, 6, 9, 12, 15, 18, 21]

(Note: Be sure to include the start and end times for the video)

###Colors

colors are the hex color values that you would like to apply to the background of the elemnent in between the breakpoints above:

colors: ["ff0000", "ff7f00", "ffff00", "00ff00", "0000ff", "6500fd", "8502fd"]

###Classes

The plugin can also apply classes instead of background colors. This offers more flexibility in adding background images or even whole elements.

classes: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]

###Element

element is the ID of the element that the color or class changes will be applied to:

element: "body"

###ID

id is the ID of the element where the YouTube video will be placed:

id: "ytplayer"

###Mode

Setting mode to one of its options will toggle colors or classes being applied to the element:

mode: "color" //Default
mode: "class"

###Width & Height

These variables will set the width and height of the YouTube video:

width: "560",  //Default
height: "315"  //Default

###Youtube

youtube is the video ID of the YouTube video you would like to embed:

youtube: "KgXf9Ed_A3Q" //Default