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'>
//<![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>

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 {
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/AVvXsEjsZ5X4QF5moLvxYZ9VDSXb2-sCKS8yv2_J-dO1rc2YqZ7HV3conEDR0-XUBCqVtAyeNYQiRGzBpcXaex5xIFe2jCmMVI8H6rtBPFOC5ZOUK78nKZO-qbAZ0T2TNcwkR8Vb5IGoG3mDKc_S/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/AVvXsEiaZSz0O8Wu_LXXW-zXZa97ebSCixJLPHHuSGj57_ju0b6eq8w8GVPR6Erxay_OAV-XbjULcEACmp8bsOreGq1WBjtpnKJ5CWWG2wkr-jOuXSYB1Ph7Njvh9o94YNwnHDuzSamMcLptbtIq/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;
}

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.

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

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.

Share on Google Plus

About Education

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.