[Resolved] Page Header + Sections –> how to get rid of an unnecessary colored layer?

[Sven]

Hi,
on my start page I have defined a video within the page header (elements).
I don’t know why, but somehow there’s a grey overlay between the header and the 1st section…
How can I get rid of this?
I appreciate your answer with best regards from Germany,
Sven

[David]

Hi there,

the video is escaping the container so lets give that section the overflow: hidden; property so you could just update this CSS:

.background-video-content {
    position: relative;
}

to

.background-video-content {
    position: relative;
    overflow: hidden;
}

[Sven]

Nope… doesn’t work! That layer still appears…

[David]

Can you add that CSS back in and clear any caches so i can take a look?

[Sven]

Yep, done

[Sven]

Firefox: works, Chrome: not

[David]

The video was in a section when i last checked, its now in the Header Element 🙂 so try this:

.page-hero {
    position: relative;
    overflow: hidden;
}

[Sven]

Sensational! 🙂

[David]

Glad we got there, Chrome seems to dislike the object-fit videos and 100vh containers. I am sure others will find this helpful.

[Author]

Posts