Removing page's body background color from video header

Hi there,

I've checked your site and the video doesn't have an overlay.

The "overlay" appearance you see is because of the video having an opacity value of 0.5.

This means you're seeing background color through the video instead it of having an overlay color.

We can try to change the opacity value of the video by using this CSS:

video.background-video {
    opacity: 1;
}

This is what it will look like: https://share.getcloudapp.com/X6u9BPo9

Yep, that's right I missed this opacity setting I had from another site.
That's correct it now works fine as the original video but, of course, doesn't work so fine with the menu and I also lose the negative top width of the boxes below...

Is there a way to still add a RGB overlay to the video or does it need the opacity thing?

You can try adding this CSS:

.page-hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(25,25,25,0.5);
    z-index: 1;
}

Change the background-color value to your preference. :)

Great, that works fine indeed!

Now, what about the 2 "WP Show Posts" boxes below?
Is there a way, by any chance, to bring them on top of the video so that I still get the effect of the negative top margin?

OK, I think I found how to make it work with z-index.
I'll play around a bit more with this, no problem.

Thanks a lot for your help!

Nice one. No problem. :)