Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

You can test it on the following demo blog – click the link that says “Turn off the lights” and the page will be darkened. To make the page elements visible again, just click the “Turn on the lights” link:

How to add the “Turn off the Lights” Feature to Blogger/Blogspot

Step 1. Log into your Blogger account and click on your blog, then go to “Template” and hit the “Edit HTML” button

Step 2. Click anywhere inside the code area and search for the following tag by pressing the CTRL + F keys (hit Enter to find it):

</head>

Step 3. After you found it, paste the below scripts just above it:

<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(){
$(“#lightsoff”).css(“height”, $(document).height()).hide();
$(“.lightSwitcher”).click(function(){
$(“#lightsoff”).toggle();
if ($(“#lightsoff”).is(“:hidden”))
$(this).html(“Turn off the lights”).removeClass(“turnedOff”);
else
$(this).html(“Turn on the lights”).addClass(“turnedOff”);
});
});
//]]>
</script>

Note: if you already have one version of jquery in the template, please remove the line in red.

Step 4. Now search for the following tag:

]]></b:skin>

Step 5. Just above ]]></b:skin> add the following CSS code:

/* Turn off the lights
———————————————– */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEeQ/PEu-OStZciA/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(http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAEeU/F0WKs6_WARM/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 6. Finally, find this tag:

</body>

Just above the </body> tag, add this HTML code:

<div id=’lightsoff’/>

Step 7. Click the “Save Template” button and that’s it!

Now, each time you add a video, either in a post or using 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 iFrame code of your video instead of the text in blue and “Save” the gadget or “Publish” your post. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery and if you have another version of jQuery, you need to remove it, otherwise it might not work.

Related Posts

Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will most likely be useful for you….

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers can “play” with certain…

Page peel effect using jQuery

Page Peel is a popular page flip effect that when your cursor is passing over it, will show “what’s behind” as if it would be a book….

Orbit – jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This…

Possibly the most simple jQuery Slider

Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have…

Adding a Youtube Video in the Background of a Blogger blog

Some of you might have wondered how to put a video to play in the blog’s background, so that instead of having just a color or an…

Leave a Reply

Your email address will not be published.