
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.
- Publication date: 04.04.2018
- Source