Turn the lights off in youtube

Recently I came to know about the full movies available on youtube. And for marathi, they have a good selection of recent movies. But somehow, I was not getting the "movie" experience. The other stuff on the page was distracting. I could not watch the movie with full screen because it looked very bad (the best resolution is 480p). So I wrote some javascript code and executed it. Following was the result.
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.)
var dark_layer = document.getElementById ("youtube_dark_layer_by_sujeet");
if (dark_layer == null) {
    var body = document.getElementsByTagName ("body")[0];
    body.innerHTML = "<div onclick='javascript:document.getElementById(\"youtube_dark_layer_by_sujeet\").style.display=\"none\";'id='youtube_dark_layer_by_sujeet' style='background:black;width:100%;height:100%;z-index:1000;position:absolute;opacity:0.95;display=block;'></div>" + body.innerHTML;
}
else {
    if (dark_layer.style.display == "block")
        dark_layer.style.display = "none";
    else 
        dark_layer.style.display = "block";
} 
All the script did was add a "div" tag at the start of the contents of "body" tag. The div tag covered the whole screen, was black and 95% opaque. The trick was the z-index. It is a CSS property which decides which element should appear on top of which element in case there is overlap. By trial and error I saw that a z-index of 1000 was sufficient for the div to be on the top of all the elements of the page.

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 -
var dark_layer = document.getElementById ("youtube_dark_layer_by_sujeet");
if (dark_layer == null) {
    (function create_dark_layer ()
     {
         var divTag = document.createElement("div");
         var styl = divTag.style;
         divTag.id = "youtube_dark_layer_by_sujeet";
         divTag.setAttribute("onclick","javascript:document.getElementById('youtube_dark_layer_by_sujeet').style.display='none'");
         styl.width = "100%";
         styl.height = "100%";
         styl.position = "absolute";
         styl.background = "black";
         styl.zIndex = "1000";
         styl.opacity = "0.95";
         styl.display = "block";
         document.body.insertBefore(divTag, document.body.childNodes[0]);
     })();
}
else {
    if (dark_layer.style.display == "block") {
        dark_layer.style.display = "none";
    }
    else {
        dark_layer.style.display = "block";
    }
}
Essentially, instead of inserting text in the html document and letting the browser interpret it, this new code systematically told the browser to create a div element, what all its properties are, and where to insert it.

Creating a bookmarklet :
Bookmarklet is nothing but a html link where href attribute has a javascript code instead of an url. In order to turn the javascript code into a bookmarklet, we first need to "url-encode" it. This webpage allows us to do exactly that.

3 comments :

  1. There are plugins for browsers to do such things for any flash/html5 video. For example, chrome has the following extension:
    https://chrome.google.com/webstore/detail/bfbmjmiodbnnpllbbbfblcplfjjepjdn?hl=en-US

    It does the same thing as you did.

    Reply Delete
  2. Oh yeah. Thanks for pointing that out. I used to use one greasemonkey script for that.

    I did not use a ready made one because.

    * I do not need any of those fancy features which they provide.

    * I don't like to Install extensions/addons to do such small things.

    * I could write my own in 2 minutes! And It did just what I wanted and nothing else.

    Reply Delete

Post a Comment

Note: Only a member of this blog may post a comment.