Toggling Youtube Overlays

With distance learning the norm in our school district, our son is suffering the experience of full-time, remote-meeting hell. All classes are being taught over webex, on a sparse twice a week schedule. Some of the classes include extra material. One, in particular, is an college-level AP class that uses a series of video lectures hosted in youtube playlists to make up for the insufficient number of classes scheduled each week.

So my son gets to watch most of the chemistry class’s material from the perspective of a camera aimed straight down at a desktop where the teacher writes material on sheets of paper. To be honest, it’s a modern replication of the days of teachers writing out overhead transparencies while projecting it on the front of the lecture hall. You just don’t get to see anything but the teachers hands.

While this is pretty boring, it’s functional. The teacher can progressively write out notes and doesn’t have to translate them into a slide deck. Plus it’s easier to read than if the camera were pointed at a whiteboard.

Further, it’s easier to capture notes by using basic screen capture. Except…except for the fact that YouTube covers the image with playback controls, toolbars, and gradients when paused. Instead of taking screen captures drive-by style and hoping for the best, you likely want to pause the video, capture the area carefully and then resume. So you need a way to get those controls out of the way.

The Bookmarklet

There are a variety of posts in a variety of places there that show how to create a browser bookmark that runs javascript (aka a bookmarklet) to achieve the goal. Here is the formatted bookmarklet I put together that lets you click once to hide the overlays and then a second time to redisplay them.

javascript: (function () {
  var styleElement = document.getElementById("hideOverlays");
  if (styleElement) {
    styleElement.remove();
  } else {
    styleElement = document.createElement("style");
    styleElement.id = "hideOverlays";
    styleElement.type = "text/css";
    document.getElementsByTagName("head")[0].appendChild(styleElement);
    styleElement[
      "string" == typeof document.body.style.WebkitAppearance
        ? "innerText"
        : "innerHTML"
    ] = ".ytp-gradient-top, .ytp-gradient-bottom, .ytp-chrome-top, .ytp-chrome-bottom { display: none !important; }";
  }
})();

Here is the same code condensed a bit. This is what you would paste in to the URL field of a browser bookmark. It could be shrunk a tiny bit more, but it’s not very big as is and can be easily converted back to the formatted version without losing useful stuff like variable names.

javascript:(function(){var styleElement=document.getElementById("hideOverlays");if(styleElement){styleElement.remove();}else{styleElement=document.createElement("style");styleElement.id = "hideOverlays";styleElement.type = "text/css";document.getElementsByTagName("head")[0].appendChild(styleElement);styleElement["string"==typeof document.body.style.WebkitAppearance?"innerText":"innerHTML"] = ".ytp-gradient-top, .ytp-gradient-bottom, .ytp-chrome-top, .ytp-chrome-bottom { display: none !important; }";}})();

Results

As you can see, the controls that cover some of the notes: gone. The annoying transparent, black gradients: gone. Clickt he bookmarklet again, and you can easily resume the video without knowing the keyboard shortcuts.

Up Next

Stay tuned for future posts on how document scanners to cleanup pictures of documents to remove lighting artifacts and turn the document into something close to OCR-able.

Updates

Edited on 6/13/2021: Evidently, youtube now hides the top information bar, including the gradient, by default now.