Greasy Fork

Transparent controls in fullscreen

Would be nice to have transparent controls in fullscreen. Because some uploaders write text on the bottom of the video, and so it's impossible to read it while video is paused.

Here's is my CSS that I have been using for a while now:

.ytp-fullscreen .ytp-progress-bar-container {
  opacity: 0.55 !important; /* transparent progress bars */
}
.ytp-fullscreen .ytp-chrome-bottom {
  background-color: rgba(27, 27, 27, 0.5) !important; /* transparent controls */
  border-color: transparent !important; /* remove colored borders */
}
.ytp-fullscreen .ytp-chrome-controls svg path {
  fill: #bfbfbf !important; /* we need the brighter buttons for better visibility */
}
.ytp-fullscreen .ytp-time-current {
  color: #f1f1f1 !important; /* slightly brighter color */
}
.ytp-fullscreen .ytp-time-separator, .ytp-fullscreen .ytp-time-duration {
  color: #dadada !important; /* slightly brighter color */
}

In your script you add left & right colored borders on the controls, which is not needed. Those can simply be transparent.

Also the svg needed to be brighter to make them more visible on certain videos. And the timestamp (current time, video time) should be brighter for better visibility.

I've made an attempt to kill two birds with one stone (see the other suggestion) by having the option to not change the colors to gray (keep it transparent). The only problem, is that you might want the controls to be gray in non-fullscreen, and transparent autohiding in fullscreen...

But that's the problem. I'd like to keep the old colors, just transparent in fullscreen.

That's possible now, there's an option to revert the colors or not for fullscreen, and one for non-fullscreen.

Let me know if there are any issues.

It's not the way I expect it to be, like with the code I gave above.

The default gradient background is way too big, it covers almost half the screen, it's ridiculous.

What I wanted was just a transparent grey color (and transparent progressbar) in fullscreen, as per the code above.

You can essentially have 3 options. 1-Use the new colors, 2-Use the old grey colors, 3-If old grey colors are used, transparent in fullscreen.

If the first is selected, the second should be deselected automatically, and vice versa.