DIV在VIDEO上左右移动

Question

我正在尝试在两个DIV之间放置一个Video元素.DIV应覆盖视频，以便客户看不到视频的某些部分。我的英语不是最好的，所以我做了一个小图片:)它应该是这样的：

+       full video width                   +
+------------------------------------------+

+------------+-----------------+-----------+
|            |                 |           |
|            |                 |           |
|            |                 |           |
|            |                 |           |
|  Overlay1  |  Visible part   |  Overlay2 |
|            |  of video       |           |
|            |                 |           |
|            |                 |           |
|            |                 |           |
|            |                 |           |
|            |                 |           |
|            |                 |           |
+------------+-----------------+-----------+

我的HTML和CSS代码如下所示：

#videoElement {
  margin: 0;
  padding: 0;
  display: block;
  width: 1280px;
  height: 720px;
}

.video-overlay1 {
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 0px;
  width: 280px;
  height: 720px;
  background-color: blueviolet;
}

.video-overlay2 {
  position: absolute;
  left: 1000px;
  top: 0px;
  margin: 0px;
  width: 280px;
  height: 720px;
  background-color: blueviolet;
}

<div class="video-overlay1">
  <div class="video-overlay2">
    <video autoplay="true" id="videoElement"></video>
  </div>
</div>

Answer 1

您可以做到这一点的最佳方法是拥有以下内容：

有一个容器DIV作为父div，并将视频宽度保持100％。

在div容器（父）内部，叠加1 div以所需宽度向左浮动，叠加div 2以所需宽度向右浮动。

如果需要https://www.w3schools.com/css/css_float.asp，请阅读浮动