Make better video viewing experience using jQuery

If you have placed videos on your websites and want to give your users a better viewing experience then you are at right place. The idea is to black out the entire page using jQuery except the video element so it provides a better video viewing experience.

Allofthelights.js is a jQuery plugin that allows to switch off the light, for your videos to stand out. It provides a switch to turn on/off the lights on the page. When turned off, the entire page blacks out and video viewing looks awesome. See the demo below.

Features

• Works with any video iframe
• Responsive video
• Custom background (color, opacity)
• Fade transition
• Switch button enterily customizable
• Control animation speed
• Support of lot of players
• Modern browsers support
• Lightweight (4Ko minified)
• Requires jQuery 1.7+

How it works ?

Alloffthelights.js calculates the video's offset and creates four div in position:absolute wrapped around it. The offset is recalculated when the light is turned on or the window resized.

How to use it?

Download the Allofthelights.js core CSS and JS files and include it's reference along with jQuery 1.7+.

<link rel="stylesheet" href="stylesheets/jquery.allofthelights.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="javascripts/jquery.allofthelights.js"></script> 

Add the video and the switch. Give the video iframe an id and place the switch button anywhere you like on the page (remember, its id must match the switch_id option). When the light is off, the plugin will add the suffix '_off' to the switch id so you can customize it (have a look at allofthelights.css).

<div id="switch"></div> <iframe id="iVideo" width="600" height="338" src="http://www.youtube.com/embed/t4H_Zoh7G5A" frameborder="0" allowfullscreen=""></iframe> 

Call Allofthelights.js. Call the JS function on your video frame... and there you go !

$(document).ready(function() {     $("#iVideo").allofthelights(); }); 

Compatibility

Due to the use of media queries, Allofthelights.js works better with modern browsers. The script has been tested on Chrome 21.0, Firefox 15, Opera 12.0, Safari 4.0, IE7, IE8 and IE9.

Official Website

Feel free to contact me for any help related to jQuery, I will gladly help you.