[Resolved] Header video hide fallback image on desktop

Home Forums Support Header video hide fallback image on desktop

This topic contains 5 replies, has 2 voices, and was last updated by  Tom 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #805166

    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?

    GP Premium 1.7.7
    #805261

    Tom Lead Developer

    Hi there,

    Try adding this CSS:

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

    Let me know 🙂

    #808048

    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

    #808528

    Tom Lead Developer

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

    #809025

    Leapforce

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

    #809475

    Tom Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.