[Resolved] Overlays for video backgrounds in header

[ch1800]

Hello,

I used to follow this thread for defining an overlay over videos in headers but I realize it deoesn’t work anymore.

Currently using this as in the attached example:

.background-video {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    width: 100%;
}

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

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

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

[Ying]

Add one line to 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;
}

So it becomes:

.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;
    visibility: visible;
}

[ch1800]

Wonderful, that works fine again, many thanks Ying!

PS1: if possible maybe edit the previous thread in case other people are following the same.

PS2: any idea why it was working before and not anymore?

[Ying]

Elvin’s CSS should work for most users.

I suspect you added a plugin after that which adds viability: hidden;to the pseudo element, so it stopped working since.

The line I added is to override that CSS 🙂

[ch1800]

Thanks, maybe this? But I had it already active previously.

<a title="Scroll back to top" aria-label="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300">

[Ying]

No, this is the back to top button, it is not related to the CSS I mentioned 🙂

One way to test is to disable all plugins except GP premium, then activate the plugins one at a time, so you should be able to tell which one is causing the issue.

But it’s not a big deal as you just need to add one line of CSS to override it.

[ch1800]

Yes, sure, no big deal – was just curious.
Thanks!

[Ying]

No problem 🙂

[Author]

Posts