Fullscreen video doesnt fit inside window when disabling padding

[danielsvane]

Captchas

• [X] I have read the instructions.
• [X] I have searched existing issues and avoided creating duplicates.
• [X] I am not filing an enhancement request.

What happened?

There is a weird interaction of settings I'm using.

In about:config I have full-screen-api.ignore-widgets set to true, to allow for fullscreen videos to only take up the size of the window theyre in.

I'm using hyprland window manager.

I'm running in compact mode in the browser. I have further installed Zen Paper Cut theme, to remove the last padding from the browser window.

When fullscreening a youtube video, the video will use my monitors size, not the windows size, but be masked by the window. A resize of the window will make the video fit inside the window again:

This only happens when I use the Paper Cut theme, or set the relevant css rules manually:

#tabbrowser-tabbox, #tabbrowser-tabpanels {
  padding: 0px !important;
  margin: 0px !important;
}

When I still have the default padding, the fullscreen works as expected.

I know the solution is simple, just dont remove the extra padding in the browser window. I just wanted to check if there was a solution, where fullscreen works normally, and I can remove the padding at the same time.

Reproducible?

• [X] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.12

What platform are you seeing the problem on?

Linux

Relevant log output

No response

[dosubot[bot]]

Hey @danielsvane! I'm here to help you with any bugs, questions, or contributions you need assistance with. Let's tackle this issue together!

I found a similar issue related to fullscreen video and padding adjustments. In the Zen Browser, when using the Zen Paper Cut theme or custom CSS rules to remove padding, you can adjust the CSS to ensure that the video fits within the window without using the monitor's full size. Here's a possible solution:

:root:not([inDOMFullscreen='true']) #appcontent video {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: contain; /* Ensures the video fits within the container */
}

This CSS rule targets video elements within the #appcontent when not in DOM fullscreen mode, setting their width and height to 100% of their container, removing any padding or margin, and using object-fit: contain to ensure the video scales appropriately within the window ^[1].

To continue talking to Dosu, mention @dosu.

[danielsvane]

I managed to "fix" this, by using the following css:

#tabbrowser-tabpanels,
#tabbrowser-tabbox {
    padding: 0 !important;
}

:root[inDOMFullscreen="true"] #appcontent,
:root[inDOMFullscreen="true"] #tabbrowser-tabpanels {
    margin: -1px;
}

I will of course miss 1 pixel around the fullscreen content, but it works in lack of better options. Apparently, some form of size difference in the window between fullscreen and non-fullscreen is required for the video to scale down properly.