html - DIV 在 VIDEO 上左右移动

Question

我试图在两个 DIV 之间放置一个视频元素。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 容器(父级)内，overlay 1 div 以所需宽度向左浮动，overlay div 2 以所需宽度向右浮动。

如有需要，请在此处阅读 float https://www.w3schools.com/css/css_float.asp