How to Add Turn Off Lights Video Effect in Blogger

You might have seen Turn Off the Lights effect on some top video blogs. Turn Off the Lights effect is created with the help of jQuery and it is used make the background darkish while watching a video online. On clicking Turn off the Lights the whole page darkens except the video and let you watch video as if you are in the cinema. Again on clicking Turn on the Lights will switch the background to normal. This effect is great for those people having a video blog, in a way that nothing will distract your visitors while watching a video. Today. in this article we'll show you that How to Add Turn Off Lights Video Effect in Blogger. Just follow these simple steps to add this effect to your blog.

Add Turn Off Lights Video Effect in Blogger

Step 1. Log in to your Blogger Account >> Select a Blog and go to Template >> Edit HTML >> Search for the </head> tag and add the following script just above/before it

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

Step 2. Again Search for the ]]></b:skin> and add the following code above it

/* Turn off 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/AVvXsEg9Vr9n3cerwmKWQblfB0niBM10mU4GQOcrUjVogCuBiFJ46x6svtrv3RBHIYKiE_0rwka0zXhrnpJkzuHp_FXNDANbUl4rj9qdZs8rucdwFrCmxpc2bwmosdClf6kiVvXSDBuweWCsyWrQ/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/AVvXsEhhBF6E_BIU45l-2NVsml7HH4xQOHktqo5Rj1eD3mb-AKVvMHxJNHKG0xEKdNYPkbCDbqvcUq2r2ukcp98K2Wd3M3Pl8SvD_e_i9gZ42Q4CCpAQ174P0qbl16ySpYrJ-SxZ807CTxwslC62/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 3. Now search for the </body> tag and add the following code above it

<div id='lightsoff'/>

Step 4. Click the Save Template button and you're done.
Now wherever you want to add the video use the below code and replace Your-Video-Here with the embed code of your video. To add this video in a post, go to Post Editor, click on HTML Tab and use the below code for adding the video

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

Congratulations: You've successfully added Turn off Lights Video effect to your blog.

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Turn Off Lights Video Effect in Blogger. Share this post with your friends and don't forget to subscribe us. Got a Question? Ask us in comments!

Share This:

Tags:

Blogger Tricks CSS Tricks jQuery

• Prevoius
• Next