Open alanbosco opened 3 years ago
This is what I could work on.
const BLACKBAR = 220
const videoStreamElement = document.querySelector('.video-stream')
videoStreamElement.style.transition = "all 0.2s ease";
videoStreamElement.style.left = 0
videoStreamElement.style.top = -(BLACKBAR) + "px"
videoStreamElement.style.width = window.innerWidth + 'px'
videoStreamElement.style.height = parseFloat(getComputedStyle(document.querySelector('.html5-video-player')).getPropertyValue('height')) + (BLACKBAR * 2) + 'px'
This will fit the video, hiding all black bars. But sometimes the video height won't change even after changing it explicitly. I've read that when hardware acceleration is on, the Nvidia driver will try to scale videos to fit 21:9 resolutions. But that is very buggy and for me, it always squashes the video making it look bad.
Welcome @alanbosco ! Full height Should work with one algorithm on every screen. (=full width only if Video is ultra wide or Screen is 4:3)
Only If an ultra wide Video 21:9 comes as a 16:9 video file(stream), then we'd need content-awareness of the black bars within the video 🤔
⚬ PROBLEM: In fullscreen video 21:9 or 16:9 videos with cinematic videos tend to have black bars on top and bottom. Which is annoying for a 21:9 Ultrawide user. They have the screen real-estate to view the content but either the youtube video doesn't fit properly or the video is in 16:9.
⚬ SOLUTION:
With a little tweak to the video player CSS, we can stretch a 16:9 video or fit a 21:9 video to cover the video fullscreen. We can have a toggle and a keyboard shortcut to activate this mode.
⚬ RELEVANCE / SCOPE: The increase in widescreen monitor adoption says this would benefit them all.
⚬ "SIDE EFFECTS":
This feature should be only useful for widescreen users. So maybe disable for rest of the aspect rations monitors?
Thank you!