Search code examples
cssfilterwebkithtml5-video

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?

Solution

  • Try setting a z-index of anything higher than 1

    z-index: 5;

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