I’m encountering resize issue regarding a modal made up of a <video> with some content below (mainly some controls and buttons).
Due to the sketch, the modal has 3 different sizes in percentage:

• S: width: 50% and height: 50%;
• M: width: 70% and height: 70%;
• L: width: 80% and height: 80%;

What I would like to do is to prevent any content to overflow and to keep the aspect ratio of the video while resizing horizontally and vertically.
All of that ideally without using JavaScript or any magic number (which are part of one of the solution in the first approach :D).

First approach

Here is the first approach I tried: https://codepen.io/Clemangue/full/zYVBXLb

The custom controls bar (the green one) must ideally have an height of 72px.
The modal buttons (salmon) has an height of 40px with a top margin of 24px.
When resizing horizontally and vertically, nothing is overflowing and the video is well resized (as if it was an image in place of the video).
The downside is I’m using several magic numbers. 😀

• height: calc(100% - 136px); 136px = height of the controls bar (72px) + height of the button bar (40px) + its top margin (24px).
• .modal-buttons { margin-top: 96px; } 96px = height of the controls bar (72px) + button bar top-margin (24px).

Without those rules, both the control and buttons bars are on top of each other.

The thing works with : Firefox 128, Chrome 127 and Edge 126.

Second approach

One of my friend tried another way to remove every magic numbers: https://codepen.io/Clemangue/full/jOjroOv
It only works as expected on Firefox 128 but does not for Chrome 127 and Edge 126.

On Chrome and Edge, both the control and buttons bars are on top of each other.

There must be an issue with Gecko or Blink I guess?

Has anyone an idea to overcome this?