css - 制作视频元素的固定高度

Question

我遇到了一个问题，我还需要制作一个固定高度的视频元素，我有一个canvas位于视频元素顶部的元素，它代表一个在对象上绘制的矩形。

当我使用object-fitwithmax-height: 60vh时，canvas元素也会缩小到，60vh但它应该是100% height

.display-cover {
  position: relative;
}

#video {
  min-width: 100%;
  object-fit: cover;
  max-height: 60vh;
}

#camera-feedback {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<div class="display-cover">
  <canvas id="camera-feedback"></canvas>
  <div class="video-cover">
    <video id="video" autoplay playsinline>
      Your browser does not support the video tag.
    </video>
  </div>
</div>

图片示例（黄色矩形应覆盖所有文档），当视频的高度是100%它工作正常

标签： css