根据视频大小调整div大小

Question

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

更新

白框是div ---＆gt;

当我尝试调整视频大小时会发生这种情况---＆gt;

我尝试在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;
}

经过大量的打击和试验，我不知不觉地设法让它发挥作用。任何人都可以向我解释高度和宽度的最大值与正常高度和宽度之间的关系。