Turn off the lights with jQuery

For those who like to watch videos online, Yank created a very useful script using jQuery. And what does this script do? Dims the lights for you , so everything on the page goes dark except the video, and everything around the video is less visible, so you're not distracted while watching.

You can check out the demo blog below. Click the ' Lights Out ' link and the page will go dark. To make page elements visible again, click the "Enable highlighting" link:

Turn off the light DEMO

How to Add the Light Off Feature in Blogger/Blogspot

Step 1 – Login to your blogger account and click on your blog. Then go to the "Template" section and click the "Edit HTML" button.

Step 2. Click anywhere in the code area and find this tag by pressing CTRL + F (press Enter to find it):

Step 3. Once found, paste the following scripts into it:

Note If you have a jquery version in your template, remove the red line.

Step 4. Now find this label:

]]>

Step 5. Top right ]]> add this CSS code:

/* Turn off the light
--------------------------------- */
#lightsVideo {
relative position;
Z-index: 102;
}
#change {
max width: 640px;
text alignment: left margin;
relative position;
Height: 25px;
screen lock;
}
.light switch {
position: absolute;
Z-index: 101;
Background image: URL (http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEEeQ/PEu-OStZciA/s1600/lights-on.png);
background repeat: no repeat;
Rear position: left;
Indent: 0 0 0 20px;
Outline: no;
text layout: no;
}
.lightSwitcher: pass {text-outline: underline;}
.off {
color:#ffff00 !important;
Background image: URL (http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAAAEeU/F0WKs6_WARM/s1600/lights-off.png);
}
# turn off the lights {
background: #000;
Opacity: 0.9;
Filter: Alpha (Opacity = 90);
position: absolute;
left: 0;
top: 0;
Width: 100%;
Z-index: 100;
}

Step 6. Finally, find this tag:

directly above add this HTML code:

Step 7 Click the Save Template button and voila!

Now whenever you add a video to a post or via an HTML/Javascript widget, use this code:

turn off the light

...and here is the video code...

Add the iframe code of your video instead of the blue text and "save" the gadget or "publish" your post. Now you can watch videos even with the lights off!

Please note that this hack uses jQuery, and if you have a different version of jQuery, you must uninstall it or it may not work.