CODEWITHSUNDEEP
cssfilterwebkithtml5-video
beta208
beta208

Reputation: 627

Background Video Filter Hides Overlaying Div

When adding any filter to our background video, the div overlay moves behind the video (becoming hidden). Here is a fiddle showing the background video with the text overlay: https://jsfiddle.net/dyrepk2x/2/

Add the following webkit-filter to the video css as indicated here:

video {
width: 100%;
height: 100%;
-webkit-filter: brightness(.5); /* add these filters */
filter: brightness(.5); /* this line works too */
}

The video overlay disappears behind the video. How can I have a filter and keep the overlay on top of the video?

Upvotes: 0

Views: 320

Answers (1)

Josh Sanger
Josh Sanger

Reputation: 804

Try setting a z-index of anything higher than 1

z-index: 5;

Works for me here: https://jsfiddle.net/dyrepk2x/3/

Upvotes: 1

Related Questions