Rethink paella background and/or video scaling

[owi92]

Right now the player interface doesn't completely scale with the video, which means the video container's grey background sometimes shows at the edges. I think we all agree that we don't love the grey background and should find a different color, be it either black or white or transparent (so it's always the site's background and changes with the color scheme).
Unfortunately we can't make the playback bar scale completely as that wouldn't work for portrait videos.

[oas777]

"be it either black or white" I'm fine with this as long as it's white.

[owi92]

I think it should be dependent on color scheme honestly. Similar to what we have now but with white for light and black for dark mode.

[LukasKalbertodt]

I like black, or almost completely black, in dark mode:

[oas777]

Keep forgetting this, why is everyone so obsessed with dark mode? You're right of course.

[LukasKalbertodt]

Additionally to picking a better color, we can also tweak some spacing options such that on common 16:9 viewport sizes for at least 16:9 videos, this doesn't happen. Like my screenshot above: There is almost no letterboxing. I would think we can fairly simply reduce the player page width to fix that.

[dagraf]

Maybe I'm too late here, but to me making it transparent seems as the option to go. As Ole stated, like this it's always the site's background.

[LukasKalbertodt]

I'm not convinced that transparent/same-as-background is the best option. To me it looks weird that the player control extends further than the video like that. Seems almost broken to me.

Compare that to just using black as background. Which, by the way, is also used for thumbnails. Black letterboxing is pretty common in these situations, I would say.

YouTube also uses black in the "wide player" mode:

And in "narrow player" mode... well it does something. In light mode it's a gradient that looks pretty ugly in my opinion. In dark mode it uses a cool new feature that colors the background according to the primary color in the video, dynamically.

And finally, Vimeo (which only has light mode I think?)

[oas777]

Well, I was in favor of "white" (which is "transparent" to me looking at the light mode of Tobira), but Lukas makes some good points. Let's discuss this in today's meeting.

[LukasKalbertodt]

We just discussed this in a meeting and decided to:

• Use black as background, but
• Make Tobira's "player rectangle" algorithm smarter so that the player is made narrower as long as all buttons in the player UI still fit. If that's not possible, the player spans the whole page though (and then the black background is visible). Meaning:
  • For portrait mode videos, we will likely not be able to fit all buttons in the narrow width -> full page width and black background.
  • For other videos, like in the first two screenshots of my previous comment, it will be possible to shrink the player horizontally. Thus we will and center it.