jQuery Plugin To Fade The Background To Dark When Playing A Video - Allofthelights.js

jQuery Plugin To Fade The Background To Dark When Playing A Video - Allofthelights.js
File Size: 5.49KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Allofthelights.js is a simple jQuery plugin that provides a switch button to fade the entire page to dark when the visitor watches a video on your web page. If you click the blank area of the page, it will return back to the original.

Features:

  • Supports multiple video iframes like youtube, vimeo, dailymotion and kickstarter.
  • Supports <object> and <embed> tags.
  • Supports custom video player.
  • Cross browser and responsive.

Basic Usage:

1. Create a switch button on your web page.

<div class="switch">Turn off the lights !</div>

2. Embed a video from youtube in your web page.

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

3. Include the jQuery library and Allofthelights.js on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.allofthelights.js"></script>

4. Initialize the plugin.

<script>
$(document).ready(function() {
$(".video").allofthelights();
});
</script>

5. Available options.

<script>
$(document).ready(function() {
$(".video").allofthelights({
color: 'black',
opacity: '0.9',
z_index: '10',
switch_selector: 'switch',
delay_turn_on: 400,
delay_turn_off: 400,
scrolling: true,
is_responsive: true,
custom_player: null
});
});
</script>

Change log:

2013-12-03

  • rewrite the plugin due to the 'Turn Off The Lights' is a trademark of "Stefan Van Damme" in US.

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