Turn Off Light Feature For Video Streaming Site

Most of the time when you’re watching a streaming video from YouTube or elsewhere, you find that all the comments, related videos, or ads are a little bit distracting. So if you own a video streaming website, it’s better if you can give this turn-off-lights feature, so your visitors can enjoy their time when watching a video from your site.

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

For the 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 the 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 is 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 clicks “Turn off the lights”, jQuery will display the shadow div, which will make a background shade, and then change the text to “Turn on the lights” with a change to the bulb icon. The shadow div z-index is above all elements except the videos and “Turn on the lights” link.

Download the script.