[Resolved] Background video – poster wont show on mobile

[Claus]

I have a video-background (element: page-hero) with the following:

<video playsinline loop muted autoplay poster="https://elob.dk/wp-content/uploads/2019/09/elob_loebere.jpg" class="background-video">
    <source src="https://elob.dk/wp-content/uploads/video/Elob_video_website.mp4" type="video/mp4">
</video>

I want to show the poster on mobiles without loading the video, but I can’t seem to get it right.

When I test it in Chrome (desktop -> view, mobile/responsive), it shows the video.
When I open the page on a mobile (iPhone), nothing is shown :-/

I can post the CSS (it’s basically taken from https://docs.generatepress.com/article/page-hero-background-video/

I really would appreciate any help.

[Tom]

Hi there,

So on mobile you’re wanting to replace the video with a static background image?

Let me know 🙂

[Claus]

Hi Tom,

That is correct. And I want the video to not load at all on mobile. Right now it trues to load the video (I think) making the performance (mobile) not-so-good :-/

Thanks
Claus

[Tom]

Not super easy to do, but there are some solutions here: https://stackoverflow.com/questions/43984623/stop-video-from-loading-in-background-on-mobile

Let me know if that helps or not 🙂

[Claus]

Thanks Tom 🙂

I think I got the “conditional load” of the video in place. The only thing left is the background image shown on the mobile (in stead of the video).

Whenever I test it in chrome (sw-simulated device), the img is shown as expected. But when I go to my mobile, the img won’t show (nor the video).

Any ideas?

Thanks again

[Tom]

Can you try giving that Page Hero a background image in the settings?

Then you can try this:

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

[Claus]

Hi Tom,

Thanks – works very good. The only thing left is that I can’t seem to get the bg-video to fill the width? Do you think it has something to do with the src of the video being copied from data-src (ref: stackoverflow) after doc ready?

Cheers,
Claus

[Tom]

Looks like your .background-video CSS was changed a bit.

Can you try this?:

.home .background-video {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
}

[Claus]

Thanks Tom,

I really appreciate your time and effort, and everything seems to work, just as I want 🙂

PS: Do you have a roadmap for the theme and GP Premium? I love the simplicity and performance and would love to see what’s coming.

[Tom]

No problem!

I keep the roadmap private at the moment, but there are some very exciting things coming in the new year 🙂

[Author]

Posts