|Before executing the code (left), and after (right)|
The bookmarklet :
When I was watching another movie, I did the same thing again, and then thought "Hey! Why not make the code into a bookmarklet?" Drag and drop this Lights off! link to your bookmarks toolbar, and you are ready! Click on the Lights off! bookmark when using youtube, and it turns the lights off. Clicking anywhere in the dark area or clicking on the bookmark again turns the lights on again. This bookmarklet was tested on youtube and google videos.
The following video shows how to save and use the bookmarklet.
The code :
This is the code which I was using initially - (the id "youtube_dark_layer_by_sujeet" was given to the div, instead of say, "dark_layer" so that there is no conflict between any preexisting div.)
When I started to use it, I realized that for the first time (that is, when the div is not present on the page, and is created for the first time), the video reloads. The problem was that I was changing the content of the body tag and hence the browser was re interpreting the content, and thus reloading the video. So I modified it to following -
Creating a bookmarklet :