Since version 2.0, it works with multiple videos and callback functions !
Check out this demo width default settings
|
|
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 :
Multiple videos :
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();
});
| 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. |
$(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');
}
});
});
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.
Version 2.0 (08/11/2013) :
Version 1.0 (07/09/2012) :
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 !
...and much more, even your custom players ! Check out the custom_player option.
Licensed under the MIT license
© 2013 - Allofthelights.js