Feature idea: Video filters and dimming

[Phixyn]

Description

I did this accidentally while trying to figure something else out:

Incidentally, this could be used for applying specific filters to videos, such as sepia, black & white or a F.lux-like filter to reduce blue light coming from the video. If videos are too bright, we could also apply a dark transparent bg color to dim the video. Obviously the use cases are all mostly for ASMR videos, but it could be used for other stuff as well. Want a vintage fireplace video on your smart TV for some reason? Well you could have it with this feature!

The color filters would probably have to be displayed in a menu of some kind, that is toggleable by the user. They could also have a slider to dim/brighten the video.

Here's the CSS for this. I'm not sure if z-index/relative position is always needed, works without on Firefox but I haven't tested on all browsers. To use, I apply the player-overlay class to the parent div of the iframe, which right now is <div class="responsive-embed widescreen">.

CSS:

div.player-overlay {
  position: relative;
}

div.player-overlay iframe {
  display: block;
  /* position: relative;
  z-index: 1; */
}

div.player-overlay::after {
  /* Set this to a flux-like color */
  background-color: rgba(180, 109, 50, 0.5);
  content: "";
  position: absolute;
  /* z-index: 2; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Need to make sure this works everywhere */
  pointer-events: none;
}