Jquery plugin dùng tắt khung cảnh xung quanh và chỉ hiện highlight duy nhất khung xem video ! thích hợp các trang coi phim online !
Download <<
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.
First div
Second div
Video
Third div
Fourth div
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 :
<link rel="stylesheet" href="stylesheets/jquery.allofthelights.css">
<script type="text/javascript" src="javascripts/jquery.allofthelights.js">script>
|
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
| Keydefault value | Description |
|---|
| color'#000000' |
Defines the background color. |
| opacity'0.9' |
Defines the background opacity. |
| z_index'10' |
Defines the background's z-index. |
| switch_id'switch' |
Defines the switch button's CSS id. |
| animation'fade' |
Defines the animation type ('fade' or 'none'). |
| delay_turn_on400 |
Defines the delay before the animation starts when turning the light on. |
| delay_turn_off400 |
Defines the delay before the animation starts when turning the light off. |
| scrollingtrue |
Allows disable scrolling when the light is on if value is false. |
| clickable_bgfalse |
Allows the user to click the background to turn the light back on. |
| is_responsivetrue |
Enables responsive video. |
| custom_playernull |
Only available when is_responsive = true.
Allows the use of a custom player. Specify your video vendor selector. |
Exemple with options :
$(document).ready(function() {
$("#video").allofthelights({
'opacity': '0.7',
'delay_turn_on': '3000',
'clickable_bg': true,
});
});