Whenever we add a filter to our background video, the div overlay ends up moving behind the video and becoming hidden. To see an example of this issue, check out this fiddle showcasing the background video with the text overlay: https://jsfiddle.net/dyrepk2x/2/
To address this problem, try adding the following webkit-filter to the video css as shown here:
video {
width: 100%;
height: 100%;
-webkit-filter: brightness(.5); /* insert these filters */
filter: brightness(.5); /* this line also works */
}
After applying the filter, you may notice that the video overlay disappears behind the video itself. Is there a way to implement a filter while ensuring that the overlay remains on top of the video?