Html 使div覆盖完全匹配视频div

我正在试着制作一个div，在bootstrap4中覆盖这个div

<div class="container text-center">
    <br>
    <h2>Remove Video Background</h2>
    <p>Example:</p>
    <div class="d-none d-md-block">
        <video width="320" height="240" controls loop autoplay>
        <source src="/static/backgroundremover.mp4" type="video/mp4">
        <source src="/static/backgroundremover.ogg" type="video/ogg">
        <img src="/static/backgroundremover.gif">
        Your browser does not support the video tag.
        </video>
    </div>
</div>

删除视频背景
例如：

您的浏览器不支持视频标记。

但是我不确定把新的放在哪里，或者如何在css中调整它的大小，使其大小完全相同

---

我的最终目标是按照我在中的要求使整个div可点击，有人建议将此作为解决问题的方法。

定位方面存在一些奇怪的问题。经过一段时间，我了解到覆盖必须是兄弟div，否则将无法工作。还有一个问题是，两者的立场都是绝对的，一个是相对的，另一个是绝对的

这是最后的css

#video {     position: relative; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

和html

<div class="d-none d-md-block">
  <div id="overlay"></div>
  <video id="video" width="320" height="240" controls loop autoplay>
  <source src="/static/backgroundremover.mp4" type="video/mp4">
  <source src="/static/backgroundremover.ogg" type="video/ogg">
  <img src="/static/backgroundremover.gif">
  Your browser does not support the video tag.
  </video>
</div>

您的浏览器不支持视频标记。