Archived topic

Background video - poster wont show on mobile

9 replies · Started by Claus on December 1, 2019

Viewing posts 1–10 of 10

December 1, 2019 at 4:20 am #1087618

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.

December 1, 2019 at 10:33 am #1088233

Hi there,

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

Let me know :)

December 1, 2019 at 10:46 am #1088241

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

December 1, 2019 at 7:48 pm #1088776

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 :)

December 2, 2019 at 1:05 am #1089034

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

December 2, 2019 at 10:15 am #1090172

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;
    }
}

December 3, 2019 at 9:36 pm #1092620

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

December 4, 2019 at 9:55 am #1093436

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%;
}

December 4, 2019 at 10:30 am #1093490

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.

December 4, 2019 at 6:19 pm #1093873

No problem!

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

This archived topic is closed to new replies.

Start building better websites today.