Video aspect ratio and spacing inside a modal while resizing

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. :D

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?

Solution

Is this what you are after? The changes I made to your version:

Slightly restructured the HTML
Used flexbox gaps instead of margins
Used some flex: 1 styles (equivalent to flex-grow: 1)
Used absolute positioning for the video

Note that you need to use the full page link after running the snippet, because the default output window is too small to contain all the content.

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #402955e6;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 70%;
  max-height: 70%;
  padding: 24px;
  gap: 24px;
  background-color: #fff;
}

.modal-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: flex-end;
}

.inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-wrapper {
  flex: 1;
  position: relative;
}

video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.controls {
  height: 72px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.modal-buttons {
  height: 40px;
  background-color: salmon;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="overlay">
  <div class="wrapper">
    <button type="button" class="modal-close">&times;</button>
    <div class="inner">
      <div class="video-wrapper">
        <video controls="controls" poster="https://assets.codepen.io/32795/poster.png" src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
      </div>
      <div class="controls">
        <p>Custom video controls area</p>
        <button type="button">button</button>
      </div>
    </div>
    <div class="modal-buttons">
      <button type="button">Bottom modal button</button>
    </div>
  </div>
</div>