jQuery Plugin to turn off the White light in Screen for Videos – Alloffthelight

Allofthelights.js is a simple jQuery plugin to change the opacity of the webpage to get it dark but leave the video player. This will help to view the video smoother. This plugin support YouTube, Vimeo, DailyMotion.

Since version 2.0, it works with multiple videos and callback functions also.

Custom Player support can be added using some options to the plugin. Check the Demo Here.

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.

The animation speed, background color and opacity can all be customized an callback functions exist.

Usage

Step 1 – Load Jquery and allofthelights.js to the html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/allofthelights/jquery.allofthelights.min.js"></script>

Step 2 – Add the video and the switch
Give the video iframe an CSS id or class and place the switch button anywhere in the web page

<div class="switch"></div>
<iframe mytubeid="mytube4" 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();
});

Requirements: jQuery
Website: http://www.megaptery.com/allofthelights/
Download: https://github.com/Pierrinho/Allofthelights.js