How to Add Turn off Lights Video Effect in Blogger ~ My Blogger Lab

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/AVvXsEg4Vr259WlKAkrLrJN56aFULxUq7kaKfoKZNgSyGtnSU0TEbmxkGDBToLE05VCZ_xedBU4dGMTUtKknUck0epBwG9-gN5Bu7-ads40FsRURNWbCb0MElTJN7k5ahlB3vC7JstJQrZhiA8se/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/AVvXsEgz2hVDd5_i41eqIGxzpvRjQzEhI8ypJWiVDoEjSWUmh5_AxKJaGoQqItblyLoZHflWnT5ebW3kG5TD4pYsYNRti9-XOoUygCC5jOr2yYatfN2HrrIxlNK7-5z3YkEKlsCOMqaThuL0KwDr/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. Note: Do not forget to replace the text Video-Here with the embed code of your video.

<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.