Turn Off The Lights Alongside Jquery

For those who relish watching videos on the internet, this is a really useful script made amongst jQuery past times Janko. And what this script does? It volition turn off the lights for you, hence that everything on the page volition last fading to dark, except the video, as well as everything unopen to the video volition last less visible, inwards a agency that nil volition distract y'all piece watching it.

You tin examination it on the next demonstrate weblog - click the link that says "Turn off the lights" as well as the page volition last darkened. To brand the page elements visible again, only click the "Turn on the lights" link:

Turn Off the Lights DEMO

How to add together the "Turn off the Lights" Feature to Blogger/Blogspot

Step 1. Log into your Blogger trouble organization human relationship as well as click on your blog, hence larn to "Template" as well as striking the "Edit HTML" button

Step 2. Click anywhere within the code expanse as well as search for the next tag past times pressing the CTRL + F keys (hit Enter to detect it):

</head>

Step 3. After y'all establish it, glue the below scripts only higher upward 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 y'all already convey 1 version of jquery inwards the template, delight take away the describe inwards red.

Step 4. Now search for the next tag:

]]></b:skin>

Step 5. Just higher upward ]]></b:skin> add together the next 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2esDfH4wzt2PXTvfZ2cA2NaoBSR54KbtEUQ6r-AmeHjP1FXEOfgU4RfZRNEdJLLc6jPYMx4KoC2VlC5vtqPLNQvQxgSBPXVm1A1GHoXt4xgsuYRjj6TCMKjEAFjw1ySM0OG9-LkZqsvMs/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/AVvXsEhZotFnpr-zBP5Z5eeSpOHhcBuCxK4gWrvkz3qLKe5WEB_5fIRjmkNAibARnmui4doHqS-XlTIEOpNrzqMX3WMDPTlt6XVtZ2BRBvMW6wBiSEDLXdUUcS3WHTY20fwzkhNQDmDdk6Mnpm4f/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, detect this tag:

</body>

Just higher upward the </body> tag, add together this HTML code:

<div id='lightsoff'/>

Step 7. Click the "Save Template" push as well as that's it!

Now, each fourth dimension y'all add together a video, either inwards a postal service or using a HTML/Javascript gadget, utilization 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 inwards bluish as well as "Save" the gadget or "Publish" your post. Now y'all tin relish your videos amongst the lights off!

Remember that this play a joke on uses jQuery as well as if y'all convey some other version of jQuery, y'all postulate to take away it, otherwise it mightiness non work.