feat(css): add semi-transparent background to overlay

[phloxic]

• makes controls visible when current video image is very light
• shows to user that the entire screen is a temporary controls area
• color is Video.js primary background color rgb(43, 51, 63) [#2B333F]

[phloxic]

As per #126 (comment)

I also experimented with a background to the widgets only, but found that approach too confusing.

[mister-ben]

Thanks, I agree that soemthing's needed to make the button visible on a light background. I'm curious though, what was confusing with background colour on the icons? This is with a background color set in the icon's SVG:

I think that's less intrusive for the unintentional tap, although if going that route re-using the big play button so the design is consistent might be better...

[phloxic]

The unintentional tap is not introduced by the background-color, really. And the responding area is (currently) larger than the button/svg. My bias may have been influenced the fact that I quite like that the mobile UI is not averse to fat-fingering ;-)

Also I am probably side-tracked by what feels to me like a more important problem: How does the user discover the skip buttons? - Currently only by unintentional tabbing on the left or right, and only when the skip is already happening. So my change could be seen as a half baked attempt to catch 2 flies with 1 stone.

By now it seems to me that a behavior and design like in the youtube mobile app with the previous/next buttons replaced by the skip buttons/behavior would make the most sense: First tap brings up the 3 buttons, user makes choice. Then probably even the skip tooltips would not be needed (in their case I definitely do not like the svg only background color). From my perspective I would then also prefer that the mobile UI looks different than the normal UI.