Turn Off Light Feature For Video Streaming Site

Most of the times when you watching a streaming video from Youtube or other else, you found that all the comment or related videos or ads are little bit distracting. So if you own a video streaming website, it’s better if you can give this turn off light feature, so your visitor can enjoy their time when watching a video from your site.

To implement this turn off light feature, you need JQuery to modify CSS on the fly.

For JQuery library i’m using Ajax from Google API:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And for CSS class i’m using:

.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(light_bulb_off.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;}
#shadow {
background-image:url(shade1x1.png);
position:absolute;
left:0; top:0;
width:100%;
z-index:100;}
.turnedOff {
color:#ffff00;
background-image:url(light_bulb.png);
}

And here the JQuery script i’m using:

jQuery(document).ready(function(){
            jQuery("#shadow").css("height", jQuery(document).height()).hide();
            jQuery(".lightSwitcher").click(function(){
                jQuery("#shadow").toggle();
                if (jQuery("#shadow").is(":hidden"))
                    jQuery(this).html("Turn off the lights").removeClass("turnedOff");
                 else
                    jQuery(this).html("Turn on the lights").addClass("turnedOff");
            });

        });

To see the complete demo click here.

So how the code works:
When the visitor click the “Turn off the lights”, jquery will display the shadow div, which will make background shade, and then change the text to “Turn on the lights” with change the bulb icon. Where the shadow div z-index is above all except the videos and “Turn On the lights” link.

Download the script.