Overlaying a transparent background on an embedded video

前端未结

关注

 2  1538

I\'ve a video which I\'ve embedded in a fullwidth div panel. I\'m trying to overlay a gradient on top of it, but I can\'t make it work. I\'ve tried adjusting z-index, wrappi

相关标签:

2条回答

予麋鹿

2021-01-18 03:28

Here is a fiddle

I used green overlay for the demo.

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;
}

0 讨论(0)

臣服心动

2021-01-18 03:44

I came across this very same issue and eventually managed to get an aesthetically similar effect simply setting the video with opacity:0.5 over a colored background.

.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 讨论(0)