调整大小时模态内的视频长宽比和间距

Question

我遇到了有关由

<video>

组成的模式的调整大小问题，其中包含下面的一些内容（主要是一些控件和按钮）。 根据草图，模态有 3 种不同的百分比尺寸：

• S：

  width: 50%

  和

  height: 50%

  ；
• M：

  width: 70%

  和

  height: 70%

  ；
• L：

  width: 80%

  和

  height: 80%

  ；

我想做的是防止任何内容溢出，并在水平和垂直调整大小时保持视频的宽高比。 理想情况下，所有这些都不需要使用

JavaScript

或任何幻数（这是第一种方法中的解决方案之一的一部分：D）。

第一种方法

这是我尝试的第一种方法：https://codepen.io/Clemangue/full/zYVBXLb

自定义控制栏（绿色）的理想高度必须为

72px

。 模态按钮（鲑鱼形）的高度为

40px

，上边距为

24px

。 水平和垂直调整大小时，没有任何内容溢出，并且视频大小调整得很好（就好像它是代替视频的图像）。 缺点是我使用了几个神奇的数字。 ：D

• height: calc(100% - 136px);

  136px

  = 控制栏高度 (

  72px

  ) + 按钮栏高度 (

  40px

  ) + 上边距 (

  24px

  )。

• .modal-buttons { margin-top: 96px; }

  96px

  = 控制栏高度 (

  72px

  ) + 按钮栏上边距 (

  24px

  )。

如果没有这些规则，控制栏和按钮栏就会彼此重叠。

该产品适用于：Firefox 128、Chrome 127 和 Edge 126。

第二种方法

我的一个朋友尝试了另一种方法来删除所有魔术数字：https://codepen.io/Clemangue/full/jOjroOv 它仅在 Firefox 128 上按预期工作，但不适用于 Chrome 127 和 Edge 126。

在 Chrome 和 Edge 上，控制栏和按钮栏位于彼此之上。

我想 Gecko 或 Blink 一定有问题？

有人有办法克服这个问题吗？

Answer 1

这就是你所追求的吗？

.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 {
  display: flex;
  align-items: center;
  height: 72px;
  background-color: lightgreen;
}

.modal-buttons {
  height: 40px;
  background-color: salmon;
}

<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>