For those who enjoy watching videos on the net, this is a very useful script made by Janko with jQuery.
So what this script does? It will "turn off the lights" so that everything you have on the page will be fading to dark less the video, so there will not be other elements that will distract us while watching a video and we will feel like in the cinema.
You can see an example here by clicking on the link that says "Turn off the lights".
Whenever you want, then you can click on the link again and it will turn the lights back on.
To put this effect of "lights" on the blog, go to Template > Edit HTML and before the </head> tag (CTRL + F to find it), paste the script:
Then, before the </body> tag, add this:
Remember that this trick uses jQuery, so if you use Scriptaculous or Mootools you should apply a patch, and if you use another version of jQuery, you must use only one.
More about → Turn off the lights with jQuery
So what this script does? It will "turn off the lights" so that everything you have on the page will be fading to dark less the video, so there will not be other elements that will distract us while watching a video and we will feel like in the cinema.
You can see an example here by clicking on the link that says "Turn off the lights".
Whenever you want, then you can click on the link again and it will turn the lights back on.
To put this effect of "lights" on the blog, go to Template > Edit HTML and before the </head> tag (CTRL + F to find it), paste the script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Then add before ]]></b:skin> the CSS styles:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#darkness").toggle();
if ($("#darkness").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>
/* 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/AVvXsEijdTee3ytVsLmpmhUS1g7nyU_O8MUL0TwSuT-ZQ4a5oSd-CSk4sX6lB1dYo_88Lbd-XW014NGtLRA6MiR1Ttu53AAjm8w1lo47Rr78oqMw4apF9Ff34gnJy596R2TAG9TTaZUAydCnc22-/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/AVvXsEiCKMYDcfoEGRMklCTmnxp7-7xlw3ne-XvuHD6wLmskGVnZ6yUIL7C2Sg0csoR8d2fweaMm1eLKt-AQ6vn7zq8cuiR5lfWAOoZEMCRgNU-yd1ga-K-E5j5OJ4M5sD72or1YZ3HC6_15Tagn/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
 |
| Click on the arrow to expand the styles |
<div id='darkness'/>And finally, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:
<center>Add the code of your video to where is indicated and that's it. Now you can enjoy your videos with the lights off!
<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>
Remember that this trick uses jQuery, so if you use Scriptaculous or Mootools you should apply a patch, and if you use another version of jQuery, you must use only one.
.jpg)
