• Thiết kế website bán hàng miễn phí 2018

Jquery tắt đèn khi xem video ! Turn off the light !

  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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">script>
<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).

<div id="switch">div>
<iframe id="video" src="http://www.youtube.com/embed/HAfFfqiYLp0" allowfullscreen="" frameborder="0" height="338" width="600">iframe>

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

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

Options

Keydefault valueDescription
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,
        'custom_player': "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"
    });
});
Share facebookShare facebook

Facebook Comments

Tin Cùng Chuyên Mục

Trang 1 / 1

Bạn đã đọc tin này chưa ?

Go Top