根据视频大小调整 div

Question

我在视频中创建了一个按钮，并在该按钮的顶部添加了一个 <div>。但是，当我尝试调整该视频的大小时，我希望该按钮随该视频一起调整大小，即我希望 <div> 即使在我尝试调整视频大小时也能很好地覆盖视频中的该按钮。

更新

白框是div--->

这是我尝试调整视频大小时发生的情况--->

我尝试在 CSS 中使用百分比值，但仍然无法正常工作，可能是因为外部黑条。

更新 2

.start-button {
  width: 42%;
  height: 19%;
  position: absolute;
  top: 3%;
  left: 5%;
  margin: 20% 0 0 24%;
  cursor: pointer;
}

HTML结构

<div class="container">
        <video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}">
            <source src="sortedd.mp4" type='video/mp4'/>
        </video>
        <div class="option-panel">
            <!--    Starting of the quiz    -->
            <div class="start-button"></div>
        </div>
</div>

Answer 1

好的，我就是这样做的：

HTML结构

   <div class="container">
        <video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}" width="100vw" height="56.25vh">
            <source src="sortedd.mp4" type='video/mp4'/>
        </video>
        <div class="play-button"></div>
   </div>

CSS样式

.play-button
{
  background-color: red;
  width: 44vw;
  height: 9.687vw;
  background: red;
  max-height: 18vh;
  max-width: 77.222vh;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
}

经过大量的打击和试验，我以某种方式设法让它发挥作用。谁能解释一下高度和宽度的最大值与正常高度和宽度之间的关系。

根据视频大小调整 div

Resize div based on the video size

javascript

css

responsive-design