How to Add a Turn Off Lights Effect in Blogger While Watching Videos

This plugin is very awesome and also very important for our blogs and most important for those blog who shows the videos on their blogs, you can easily turn off lights of your blog and easily can see those videos and feel like you are watching them in cinema halls

• LIVE DEMO

Add Turn Off Effect in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Click on Edit > Backup your Template before making any changes to your blog
- Press Ctrl + F and search the  </head> tag

Paste below code before </head>

<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(){
    $("#lightoff").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
    $("#lightoff").toggle();
    if ($("#lightoff").is(":hidden"))
    $(this).html("Turn off the lights").removeClass("turnedOff");
    else
    $(this).html("Turn on the lights").addClass("turnedOff");
    });
    });
    //]]>
    </script>

Don't Paste Yellow Script if You Already Have it in your template

Now Search for this code ]]></b:skin>

Paste below code before/above  ]]></b:skin>

 /*--------Make 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/AVvXsEhQ3IpV6UOyUoCykVnBWDtqealFOpcFaYjafiRs2URqoMCKAZ8HxzwQli5Zg52jg6Q9gDAgYVBQGSR31m-Yg-El48SzlZC5HD9QS8Lmd_2iNDpw692aU88O-XAONunck3iS7JJSUg9dHgBq/s1600/wglightn.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/AVvXsEhyyFMWPgr-pxKxHTLdMKsHS7rUSn5M6Gd3_bn784HCZELTNyN9JEZ-RMV19Ur_mZa2ds3kQ7IcrQffmEWnxRryNgOinucKBYHONJRMj9rdqvwXcV1_7wW6XjmYlZ7TJQtfLnot-OpMHrGX/s1600/wglightnf.png);
    }
    #lightoff {
    background:#000;
    opacity:0.8;
    filter:alpha(opacity=80);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:100;
    }

Now Search for </body> tag
Paste next code before/above </body> 

<div id='lightoff'/>

Save Your Template

2nd Step - Add ON/OFF Button

Paste below code where you want to embed video and button

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
paste here video code
</div>
</center>

Customize
Make Changes!

Replace it paste here video code with your youtube OR other video code.
That's all, if you need any further help, feel free to ask through the comment box, and don't forget subscribe for our latest posts update and share this with friends/followers.