Archived topic

Overlays for video backgrounds in header

7 replies · Started by ch1800 on January 5, 2022

Viewing posts 1–8 of 8

January 5, 2022 at 5:10 pm #2070521

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;
}

January 5, 2022 at 7:02 pm #2070642

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;
}

January 5, 2022 at 8:12 pm #2070678

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?

January 6, 2022 at 4:45 pm #2071800

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 :)

January 6, 2022 at 4:54 pm #2071815

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">

January 6, 2022 at 5:27 pm #2071835

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.

January 6, 2022 at 5:47 pm #2071843

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

January 7, 2022 at 5:03 pm #2072866

No problem :)

This archived topic is closed to new replies.

Start building better websites today.