[Resolved] Header video hide fallback image on desktop

[Leapforce]

We are using the Page Headers module on our website and display a video on our homepage. The problem we have is that the fallback image will load before the video, so it will shortly show the fallback image. We want to disable the fallback image for desktop users, but not for mobile / tablet users because they need to see the fallback image.

This is a part of the body where the video is loaded:

<a class="screen-reader-text skip-link" href="#content" title="Spring naar inhoud">Spring naar inhoud</a><div id="page-header-55" data-vide-bg="mp4:https://www.leapforce.nl/wp-content/uploads/2017/11/video-growth-hacking-digital-business-marketing-tooling-experiment-lean-startups1.mp4, poster:https://www.leapforce.nl/wp-content/uploads/2017/11/a-man-in-a-suit-drawing-an-upward-arrow-with-his-finger-5.jpg" data-vide-options="posterType:jpg, className:generate-page-header-video, loop:true, muted:true, autoplay:false" class="page-header-content fullscreen-enabled vertical-center-container generate-combined-page-header generate-page-header generate-content-header" >

What would you recommend?

[Tom]

Hi there,

Try adding this CSS:

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

Let me know 🙂

[Leapforce]

Hi Tom,

Thanks for your suggestion. Unfortunately this didn’t work. We have tried following code too:

@media only screen and (max-width: 600px) {
  poster[type="jpg"] {
    display: none!important;
  }
}

EDIT: This did work. Needed to clear cache

[Tom]

I’m not seeing the poster anymore – are you still seeing it after you clear your browser cache?

[Leapforce]

I needed to clear the cache. Apologies! Thanks for the help.

[Tom]

You’re welcome 🙂

[Author]

Posts