[Resolved] Flickering poster image when using background video

[jm1991]

Hi there,

Is there a way to stop (or hide) the poster image for a background video from flicking before the video starts playing?

Also just to confirm, the background video will work on mobile? I came across some threads that stated background videos won’t work on mobile, but the video plays when I use Chrome DevTools to switch to a mobile device.

My sites not live yet, but I’m trying to learn about any limitations before I push anything live.

Thanks

[Leo]

Hi there,

Is there a way to stop (or hide) the poster image for a background video from flicking before the video starts playing?

We would really need to see the site in question to determine if there is a solution. Does the same issue happen with all plugins disabled? Sometimes it could be a caching issue.

Also just to confirm, the background video will work on mobile? I came across some threads that stated background videos won’t work on mobile, but the video plays when I use Chrome DevTools to switch to a mobile device.

That depends on if the mobile browser supports it. Nowadays most browsers should play the video.

[jm1991]

Once again, thanks for the quick response.

I’ll return to this post when my site is live.

I’ve only been using test videos, so it could be when I use the video I actually want to use, it may not be a problem, but I’ll circle back if I’m still stuck / having issues.

[Leo]

Sounds good 🙂

[jm1991]

Hey, just reviving this thread.I had to edit my original post and submit a sample URL.

So the poster image is still flickering just before the video just playing.

The actual video and image are not the assets I intent to use, but more just to test any issues.

Hopefully you guys can suggest a way to stop the image from being seen before the video plays?

Sometimes it’s quite subtle, but there has been a few occasions when the flicking is quite jarring.

[David]

Hi there,

is this on any particular device or browser as i cannot replicate the flickering ?

[jm1991]

Hey David,

Mobile seems to be fine, but I notice it on desktop.

[Tom]

I don’t believe there’s a way around that – the poster is doing what it was built to do.

You’re likely better off ditching the poster completely and adding a background image to the page hero. Then you can disable it on desktop:

@media (min-width: 769px) {
    .page-hero {
        background-image: none;
    }
}

[jm1991]

Thanks guys,

I’ve decided to just remove the image all together. The current CSS changes the opacity of the header section and it looks good enough until the video loads.

Removing the poster image also helps with performance anyway, so it’s a win win.

[Tom]

Sounds good! Thanks for letting us know 🙂

[Author]

Posts