How to Add Turn off Lights Video Effect in Blogger

In the past we have already showed you how to do video SEO in Blogger to get maximum visitors out of search engines. However, the question is that do all of your visitors would end up watching that video? What you can do to make your video standout in a blog post? The reality is that nobody likes to force their visitors to watch, but may be making your video more prominent could help in getting maximum video plays. Today in this article, we will show you How to add Turn off Lights Video Effect in Blogger.

What is Turn off Light Video Effect?

With the help of jQuery this script helps you to create darkish background around the video so that your video stands outs among the whole content. It provides you the flexibility to turn the background dark by pressing “Turn off Lights” button. When you are finish watching the video, you can again turn the background normal by pressing “Turn on Light” button.

How to Add Turn off Lights Video Effect in Blogger:

First and foremost you have to install the jQuery script in your template that would take care of most of the things.  So, go to Blogger >> Template >> Edit HTML >> Search for </head> and just above it paste the following piece of coding:

<script type='text/javascript'>
$("#lightsoff").css("height", $(document).height()).hide();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
$(this).html("Turn on the lights").addClass("turnedOff");

Once you are finish adding above jQuery code, now it’s time to add CSS code in your template. With the combination of both jQuery and CSS it will provide you just perfect results.  Paste the following CSS code right above the ]]></b:skin> tag in your template.

 /* Turn off the lights
----------------------------------------------- */
#lightsVideo {
#switch {
margin: 25px 0 0 60px;
.lightSwitcher {
padding: 0 0 0 20px;
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
#lightsoff {

Lastly in the template search for </body> tag and just above it paste the following code:

<div id='lightsoff'/>

After adding allof the above codes, save your template by pressing “Save Template” button. That’s it you have successfully installed the effect in your template. Now the next thing is making it appear on your video.

It entirely depends on you on which video you want to apply this effect. Go to Blogger >> Add a new post >> revert to EDIT HTML Tab and paste the following code there. Note: Do not forget to replace the text Video-Here with the embed code of your video.

<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
<div id="lightsVideo">

Congratulations, you have successfully added light off effect in your video. Now press the Publish button to make it live for your visitors.

We hope this tutorial may have helped you in learning a smart technique of adding turn off light video effect in blogger. If you are a YouTube fan then, you might have seen this feature on YouTube too. Share your thoughts about this amazing widget we have come up with by commenting below.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


August 11, 2014 at 1:30 PM


August 12, 2014 at 4:05 AM

Your script doesn't work. I follow all your indications, but this doesn' work.

Editorial Team MOD
August 12, 2014 at 6:31 AM

Here's a URL

Editorial Team MOD
August 12, 2014 at 6:32 AM

Tutorial updated, Please retry.

August 14, 2014 at 9:47 PM

Hi Syed, wish you a very happy independence day. Peace and god bless you.

April 21, 2015 at 10:13 AM

Thanks bro, its awesome! thanks you very much! Hoho..

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.