When in theater mode, video height exceeds screen viewport

[Yogotami]

As title says and using Firefox (latest release), video is bigger than my screen size.

Changing the value of height in #video-container-inner from height: 100% to height: calc(100vh - 50px) seems to resolve the problem.

This 50px comes from trial and error but does not resolve the entire problem as it creates another:

As I'm not as savvy as a lot of you guys, I have no idea how to decisively fix this.

[molytov]

I found a sort of band-aid solution. In youtube-local/youtube/templates/watch.html, go to Line 90. Change the % from 100% to a smaller value. I found 60% works for 1080p videos, but this differs depending on resolution.

padding-top: calc(100%*var(--video_height)/var(--video_width)); Change to padding-top: calc(60%*var(--video_height)/var(--video_width));

Restart the service to ensure changes take effect.

This actually kind of exposes another issue, which is the fact that the video player size changes with the resolution setting. This solution only works as long as you don't change resolutions. If you lower resolution to something like 360p, then your player will be much smaller. The yt-local fork on SourceHut seems to not have this issue, so it might help to see how it handles the player dimensions.

[user234683]

This actually kind of exposes another issue, which is the fact that the video player size changes with the resolution setting.

This is intentional. If the video player size is too large for the height of the video, then the video will be blurry (e.g. you wouldn't want to go fullscreen on a 240p video). Whereas if it is too small, then most of the resolution of the video is being ignored (you would want to watch a 1080p/4k video on fullscreen)

So the displayed height of the video in pixels needs to be equal to height of the video's resolution (360 pixels high for 360p). But if the video resolution is too big, the width needs to not exceed the browser width. So you need to scale the video down, while keeping the aspect ratio, which CSS is really bad at unless you have the required width available in pixels (because it won't accept percentages in the calculations).

To make things really fun, CSS does not provide the width of the browser window. It provides the width of the window plus the width scrollbar in the form of 100vw, which is pretty useless for this purpose (or any purpose really) since we can't exceed the scrollbar and do not know what width it is.

If that was it, maybe this would be tractable, but there's other things as well:

• For long (e.g. 3 hour) videos, if the resolution is say 360p, it will be difficult to scrub in the video, because 1 pixel might correspond to 3 minutes. So you have to sit there and wait 3 minutes to get to the desired part, after painstakingly trying to move your mouse a single pixel. The solution to this is to widen the scrub-bar to be the entire width of the screen if necessary.
• Both plyr and non-plyr (browser default) need to be supported. Plyr puts the <video> inside a bunch of <div>s, whereas the browser default does not. So both cases need to be handled.

Unfortunately, CSS is not well designed for trying to accomplish this, or really anything at all. I've had a tower of ducttape and ugly hacks that makes this work, but the browser vendors keep changing/breaking stuff :\

Does it happen on latest chromium too?