[Support request] Background Video and Back up Image

[David]

I’m using Generate Press Page Headers for a background video in the header on the homepage of nvosystems.com. As the page loads, it’s (about 95% of the time) quickly flashing the back up image i’ve set for mobile before playing the video. This creates a sort of glitchy experience upon first arriving at the website. Is there a way to circumvent this?

Here is a video of it happening: https://www.dropbox.com/s/8vnu2g6ijfijrgq/homepage_video.mov?dl=0

[Tom]

Hi there,

Would you prefer a solid background color?

[David]

Hi : )

Is that my only option? and would that mean I would have to replace the mobile image with a solid color?

Thank you 🙂

Dexter

[Tom]

Something needs to show in the video element while it loads, whether it’s an image or a solid color. You should be able to set a solid color on desktop only with some CSS.

Let me know 🙂

[David]

Yes, I would love that!

[Tom]

Give this a shot:

@media (min-width: 769px) {
    .generate-page-header-video {
        background-image: none !important;
    }
}

[David]

that did it, thank you! anyway to make it black?

[Leo]

Can you try:

@media (min-width: 769px) {
    .generate-page-header-video {
        background-image: none !important;
        background-color: #000 !important;
    }
}

[Author]

Posts