在视频上左右分割

我想在两个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>