Javascript 根据视频大小调整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>

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

---

好的，我就是这样做的：

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>

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

---

经过多次尝试，我终于成功了。谁能给我解释一下高度和宽度的最大值与正常高度和宽度之间的关系。

请提供更多信息。源代码会很好，但也会解释出哪里出了问题，可能是一个屏幕截图，以及您试图让它工作的内容。我已经更新了问题。对不起，耽搁了。我正忙着考试呢。我知道它不完美，你能不能建议我一些我可以尝试的东西百分比值不起作用。我们需要知道html结构…好的，我已经添加了html结构