web-dev-qa-db-ja.com

埋め込まれたビデオに透明な背景をオーバーレイする

全角divパネルに埋め込んだビデオがあります。その上にグラデーションをオーバーレイしようとしていますが、機能させることができません。 z-indexを調整し、ビデオを別のdivでラップし、以下のようにオーバーレイクラスを追加しようとしましたが、明らかな何かが欠けているに違いありません。

私が何をしようとしても、ビデオは他のパネルの上にジャンプして戻ります（最終的には後ろに落ちます）。

あなたの助けにとても感謝します！

                <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%;
  }
htmlcssvideooverlay
7
Simeon

これが フィドル

デモには緑色のオーバーレイを使用しました。

[〜＃〜] css [〜＃〜]

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 5px;
    background-attachment: scroll;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: green;
    opacity: 0.5;
}
15
KiiroSora09

私はこれとまったく同じ問題に遭遇し、最終的には、色付きの背景の上にopacity:0.5を使用してビデオを設定するだけで美的に類似した効果を得ることができました。

.vid-bg {
  opacity: 0.5; /* ! */
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%
}
<body style="background-color: green">
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="vid-bg">
    <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
  </video>
</body>
0
Luis Antonio Canettoli