Allofthelights.js

How it works ?

I initially wanted to have only one div to cover the entire document and to play with the video iframe's z-index. Unfortunately I encountered several problems with some players : it worked with YouTube, but not with Dailymotion, etc. I therefore decided to make a new script that would work with any player.

Alloffthelights.js calculates the video's offset and creates four div in position:absolute wrapped around it. The offset is recalculated when the light is turned on or the window resized.

Usage

Step 1 - Link to resources
Add these links (jQuery 1.7+, Allofthelights.js core CSS and JS files) to your page. You could choose to have the jQuery file hosted on your server but, hey, Google does it for you :

Step 2 - Add the video and the switch
Give the video iframe an id and place the switch button anywhere you like on the page (remember, its id must match the switch_id option). When the light is off, the plugin will add the suffix '_off' to the switch id so you can customize it (have a look at allofthelights.css).

Step 3 - Call Allofthelights.js
Call the JS function on your video frame... and there you go !

		$(document).ready(function() {
			$("#video").allofthelights();
		});

Options

		$(document).ready(function() {
			$("#video").allofthelights({
				'opacity': '0.7',
				'delay_turn_on': '3000',
				'clickable_bg': true,
				'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"
			});
		});