jQuery Plugin To 'Turn Off The Light' When Playing Videos - LightsOff

LightsOff is a very small jQuery plugin that brings the 'Turn Off The Light' experience to your webpage when watching HTML5 videos and/or Youtube/Vimeo videos. The goal is to add a customizable fullscreen background overlay to your videos when playing. A little similar to the video lightbox. You can find more examples under the demo folder in the zip.

See also:

How to use it:

1. The jQuery LightsOff plugin must be included after jQuery library like this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/lightsoff.js"></script>

2. Initialize the plugin by calling the following function on the video selector.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/lightsoff.js"></script>

3. Active the 'Turn Off The Lights' effect.

videoSelector.on('play playing', function() {
  videoSelector.lightsOff('show');
});
videoSelector.on('pause ended', function() {
  videoSelector.lightsOff('hide');
});

4. Pause the video when the background overlay is hidden.

$(document).on('lightsOn', function() {
  videoSelector.get(0).pause()
});

5. Default options to configure the background overlay.

videoSelector.lightsOff({
  color: 'black',
  opacity: '0.95',
  zIndex: '999',
  switchSelector: '.switch',
  durationLightsOff: 400,
  durationLightsOn: 400,
  allowScrolling: true
});

Change log:

2018-04-04

• v2.0.2

2016-08-30

• Multiple video support
• Add check for initialization to use public methods

This awesome jQuery plugin is developed by migueldemoura. For more Advanced Usages, please check the demo page or visit the official website.