Fork me on GitHub

Allofthelights.js

jQuery plugin to turn off the light and enjoy your videos, try it !


Download
Allofthelights.js 2.0
Turn off the lights !

Features

Since version 2.0, it works with multiple videos and callback functions !
Check out this demo width default settings

  • [NEW] Multiple videos iframe
  • Responsive video
  • Support of lot of players
  • Switch button entirely customizable
  • Lightweight (3.4Ko minified)
  • [NEW] Callback functions
  • Control animation speed
  • Custom background (color, opacity)
  • Modern browsers support
  • Requires jQuery 1.7+

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 several div in position:absolute wrapped around it. The offset is recalculated when the light is turned on or the window resized. The algorithm is simple enough for single video. It's a little more complicated when there are several videos such as the following figures :

Single video :

Video

Multiple videos :

Video 1
Video 2

Usage

Step 1 - Link to resources
Add these links to your page. You could choose to have the jQuery 1.7+ 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 CSS id or class and place the switch button anywhere you like on the page (remember, it's must match the switch_selector option).

		  

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

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

Options

Keydefault value Description
color'#000000' Defines the background color.
opacity'0.9' Defines the background opacity.
z_index'10' Defines the background z-index.
switch_selector'switch' Defines the switch button CSS id or class.
delay_turn_on400 Defines animation time to turn on the light.
delay_turn_off400 Defines animation time to turn off the light.
scrollingtrue Allows disable scrolling when the light is on if value is false.
is_responsivetrue Enables responsive video.
custom_playernull Allows to apply responsive on a custom player. Specify your video vendor selector. Only available when is_responsive = true.
callback_turn_onfunction(){} Callback function when the light goes on.
callback_turn_offfunction(){} Callback function when the light goes off.
Example with options :
		$(document).ready(function() {
			$('.video').allofthelights({
				'opacity': '0.7',
				'delay_turn_on': '3000',
				'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']",
				'callback_turn_off': function() {
					$("h1").addClass('light');
		  		}
			});
		});

Compatibility

Due to the use of media queries, Allofthelights.js works better with modern browsers. The script has been tested on Chrome 21.0, Firefox 15, Opera 12.0, Safari 4.0 and IE9.

Browser Logos

Changelog

Version 2.0 (08/11/2013) :

  • Script refactoring to support multiple videos
  • Able to use multiple switches with the switch_selector option
  • Adding two callback functions
  • Removing stylesheet file and CSS automatically added by script
  • Removing cloned switch into the DOM to appear above the overlay
  • Removing animation and clickable_bg options

Version 1.0 (07/09/2012) :

  • Initial release

Credits

Comments

comments powered by Disqus
Turn off the lights !

What is it ?

Allofthelights.js is a jQuery plugin built by Kanye West that allows to switch off the light, for your videos to stand out.
Give it a try by clicking the switch next to the video, it's great !

Players support

  • YouTube Logo
  • Vimeo Logo
  • Dailymotion Logo

...and much more, even your custom players ! Check out the custom_player option.

Licence

Licensed under the MIT license

Kanye likes it !

Other resources

Buy me a beer

© 2013 - Allofthelights.js