What is Turn off Light Video Effect?
With the aid of jQuery this script helps yous to exercise darkish background roughly the video therefore that your video stands outs amidst the whole content. It provides yous the flexibility to plow the background night past times pressing “Turn off Lights” button. When yous are complete watching the video, yous tin i time again plow the background normal past times pressing “Turn on Light” button.How to Add Turn off Lights Video Effect inwards Blogger:
First as well as firstly yous cause got to install the jQuery script inwards your template that would cause got attention of most of the things. So, become to Blogger >> Template >> Edit HTML >> Search for </head> as well as only inwards a higher house it glue the next slice 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 yous are complete adding inwards a higher house jQuery code, right away it’s fourth dimension to add together CSS code inwards your template. With the combination of both jQuery as well as CSS it volition furnish yous only perfect results. Paste the next CSS code correct inwards a higher house the ]]></b:skin> tag inwards 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/AVvXsEgbnjJv4QkLL_dz7i_U4nJz3ytGdDlMUXPadXHDHIksqKhh2ms0JCBMyimIi_FZj2-c7pVLydsDploc4isj-36HsDBF7PUBZ5S654_o1nS31MQBm0aQRJFR57HAMFC3Os4NAS8NR9c0B0qP/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/AVvXsEipcmMhA7eGqdiDTKKBShl7OL8Fln1JQrXMFVbtxZwRB_xmmZies2h8htAOpjwphmN40XHgf6xomj4Ovx0OYmwELEJ4hqavsKNtw5pp4lNxrhnExmYqA56Cic3V9ygT_NgmhBNWN6exZ3Sn/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 inwards the template search for </body> tag as well as only inwards a higher house it glue the next code:
<div id='lightsoff'/>
After adding allof the inwards a higher house codes, relieve your template past times pressing “Save Template” button. That’s it yous cause got successfully installed the upshot inwards your template. Now the adjacent matter is making it look on your video.
It solely depends on yous on which video yous desire to apply this effect. Go to Blogger >> Add a novel postal service >> revert to EDIT HTML Tab as well as glue the next code there. Note: Do non forget to supervene upon the text Video-Here amongst 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, yous cause got successfully added lite off upshot inwards your video. Now press the Publish push to acquire inwards alive for your visitors.
We promise this tutorial may cause got helped yous inwards learning a smart technique of adding plow off lite video upshot inwards blogger. If yous are a YouTube fan then, yous mightiness cause got seen this characteristic on YouTube too. Share your thoughts most this amazing widget nosotros cause got come upwards up amongst past times commenting below.
Comments