code-charity / youtube

[top~1 open YouTube & Video web-extension] Enrich your experience & choice! 🧰180+ options & clever features📌set+forget📌Longest-standing(been tough). Please join🧩us👨‍👩‍👧‍👧 ..⋮ {playback|content discovery|player|extra buttons|distractions|related videos|shorts|ads|quality|codec|full tab|full screen}
http://improvedtube.com
Other
3.43k stars 519 forks source link

[FEAT] Fit/Stretch full screen video for 21:9 Ultrawide monitors. No more black bars. #967

Open alanbosco opened 3 years ago

alanbosco commented 3 years ago

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.

Screenshot 2021-07-04 032957

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.

Screenshot 2021-07-04 033034

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!

SHORT Table (Summary)
Problem Full-screen video on ultrawide screen
Solution Tweak styles for video player
Scope Ultrawide
alanbosco commented 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.

ImprovedTube commented 3 years ago

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 🤔