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

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.on('pause ended', function() {

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

$(document).on('lightsOn', function() {

5. Default options to configure the background overlay.

  color: 'black',
  opacity: '0.95',
  zIndex: '999',
  switchSelector: '.switch',
  durationLightsOff: 400,
  durationLightsOn: 400,
  allowScrolling: true

Change log:


  • v2.0.2


  • 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.

  • Publication date: 04.04.2018
  • Source