在嵌入式视频上叠加透明背景

Question

我有一个嵌入全角div面板的视频。我正在尝试在其上叠加渐变，但是无法使其正常工作。我已经尝试过调整z-index，将视频包装在另一个div中，并且-如下所示-添加了一个overlay类，但是我肯定缺少明显的东西。

无论我如何尝试，视频都会跳回到其他面板的顶部（最终落在其后）。>>

非常感谢您的帮助！

                <div class="videoContainer hide-for-small-only">
                    <div class="overlay"></div>
                  <video autoplay loop muted>
                        <source src="<?=URL?>public/videos/vid.mp4" type="video/mp4">
                        <source src="<?=URL?>public/videos/vid.webm" type="video/webm">
                  </video>
                </div>
我的CSS是：

.videoContainer 
{

  position: absolute;
  width: 100%;
  height: 100%;
  //padding: 20px;
  border-radius: 5px;

  background-attachment: scroll;
  overflow: hidden;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;
}
.videoContainer overlay {
    background: black;
    opacity: 0.5;
    position: absolute;
    z-index: 1;
    text-align: center;
    margin: 0%;
  }

我有一个嵌入全角div面板的视频。我正在尝试在其上叠加渐变，但是无法使其正常工作。我尝试调整z-index，将视频包装在另一个div中，然后...

Answer 1

这里是fiddle

Answer 2

我遇到了同样的问题，最终设法通过在彩色背景上将视频设置为opacity:0.5来获得美学上相似的效果。