Turn off the lights with jQuery

For those who enjoy watching videos on the net, this is a very useful script made by Janko with jQuery.

So what this script does? It will “turn off the lights” so that everything you have on the page will be fading to dark less the video, so there will not be other elements that will distract us while watching a video and we will feel like in the cinema.

You can see an example here by clicking on the link that says “Turn off the lights”.
Whenever you want, then you can click on the link again and it will turn the lights back on.

Turn off the lights

To put this effect of “lights” on the blog, go to Template > Edit HTML and before the </head> tag (CTRL + F to find it), paste the script:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
//<![CDATA[
$ (document).ready(function(){
$ ("#darkness").css("height", $ (document).height()).hide();
$ (".lightSwitcher").click(function(){
$ ("#darkness").toggle();
if ($ ("#darkness").is(":hidden"))
$ (this).html("Turn off the lights").removeClass("turnedOff");
else
$ (this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Then add before ]]></b:skin> the CSS styles:

/* Turn off the lights
———————————————– */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcWWV10W9aKzWKrVkVFkp-8UK6lRAdYtI20bzj5qn8Y6cy6glV02kAWKEnANHRXW-lOxsGV709p6pYHOxk0l73l6j2i2I_P4Fg0JtETqvY50Ak6mAnEV-eMWkzLeOqmYflZFlFCEyO68gF/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXdw5tZnfEOkGY-jdmBOw2VymU3fqwVFZjtRIZQCAVawsvOfcImfkw9GVZXSjQ4LMGccQBH_FNpqXw7WLDh0oNYxI8AQx8o1IHFBWOE14FgW6Pr5k7Pd_ioX9Ih7Cw7iCNaeMkLGfgvqd/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Click on the arrow to expand the styles

Then, before the </body> tag, add this:

<div id=’darkness’/>

And finally, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:

<center>
<div id=”switch”><a class=”lightSwitcher” href=”javascript:void(0);”>Turn off the lights</a></div>
<div id=”lightsVideo”>
…Here goes the code of the video…
</div>
</center>

Add the code of your video to where is indicated and that’s it. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery, so if you use Scriptaculous or Mootools you should apply a patch, and if you use another version of jQuery, you must use only one.