css:在youtube嵌入上创建颜色覆盖

Question

我试图在youtube嵌入视频的基础上添加颜色覆盖。我正在使用vue-youtube嵌入组件嵌入视频。

​

.video-player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 360px;
  width: 640px;
}

.color-overlay {
  height: 360px;
  width: 640px;
  background: black;
  z-index: 999;
  overflow: hidden;
}

<div class="video-player mx-auto">
  <div class="color-overlay">
    <youtube video-id="vT__WcbNWpY"></youtube>
  </div>
</div>

​

video-player类用于在视频中添加圆角。color-overlay不像我想要的那样工作，它什么也没有显示出来。我该怎么办？

Answer 1

在HTML中，使覆盖div成为iframe的同级。然后，只需在您的普通父级中使用绝对位置，如下所示：

​

.video-player {
  position: relative;
  border-radius: 10px;
  height: 360px;
  width: 640px;
}

.color-overlay {
  position: absolute;
  top: 0;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  background: blue;
}

<div class="video-player mx-auto">
    <iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="640" height="360"></iframe>
    <div class="color-overlay"></div>
</div>

​

Answer 2

在div之外添加覆盖标签，这样它就可以使用所有的屏幕，并在屏幕上添加覆盖。如果您只需要在iframe上添加颜色覆盖 div在视频播放器 div中即可。

​

.color-overlay {
      height: 100%;
    width: 100%;
    background: blue;
    z-index: 999;
    overflow: hidden;
    opacity: 0.2;
    position: absolute;
}

.video-player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 360px;
  width: 640px;
}

<div class="color-overlay"></div>
<div class="video-player mx-auto">

  <div class="">
    <iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="600" height="300"></iframe>
    </div>
</div>

​