[Support request] Different header background video on Mobile?

[Laura]

Hello Tom et al,

I bet you’ll have a recommendation and thanks for the help! I would like to have a video play at the top of this website. A HD version is 24MB and I feel like that’s a big file to load to mobile. I made a 7MB version, and it looks pretty fuzzy on a desktop monitor. Is it possible to have one video play on desktop, and a different if on mobile?
Currently I am using “Page Header” and it is loaded as a background video. Elements is not currently enabled, but i will do so if advised.

I have assigned the smaller version to this post: http://www.sarastarcharters.com/2016/02/hello-world/

I tried swapping it out with custom css like this and it didn’t do anything.

@media (max-width: 768px) {
#page-header-665.generate-content-header {
data-vide-bg: url(http://www.sarastarcharters.com/wp-content/uploads/2019/02/Sara-Star-Fishing-Charters-Newport-RI-_-Newport-Rhode-Island-Drone-Photography-and-Video-1.mp4);
}
}

I am open to all advice and thank you!
Laura

[Leo]

Hi there,

Page header module has actually been replaced by the Header Element module a few versions ago.

See Tom’s note here:
https://generatepress.com/forums/topic/gpp-1-7-introducing-elements/

Background video isn’t an option in header element but this is the recommended method – it’s better than page header’s option:
https://docs.generatepress.com/article/page-hero-background-video/

If you want one video for desktop and one for mobile, modify the HTML to this:

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-mobile">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm">
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-desktop hide-on-tablet">
    <source src="URL/TO/video.mp4" type="video/mp4">
    <source src="URL/TO/video.webm" type="video/webm">
    <source src="URL/TO/video.ogv" type="video/ogv">
</video>

<div class="background-video-content">
    Your Element content in here.
</div>

Note the use the use of hide-on class above:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

I’ve not tested this method but believe it should work.

Give it a shot and let me know 🙂

[Ighty]

Is it possible to use this method for using a picture for mobile instead of the video?

[Tom]

This method won’t work for a background image, but you can give your element a custom class and then target it with CSS.

For example, if you gave it a custom class: my-custom-class

You could do this:

@media (max-width: 768px) {
    .page-hero.my-custom-class {
        background-image: url('URL TO YOUR IMAGE');
    }
}

[Ighty]

If I understood correctly.

1) assign my element a custom class in element classes

2) add the code in the element without any reference to the picture

<video loop muted autoplay poster="URL/TO/poster.jpg" class="background-video hide-on-mobile">
    <source src="URL/TO/video.mp4" type="video/mp4">
</video>

<div class="background-video-content">
    Your Element content in here.
</div>

3) add CSS in the customizer

@media (max-width: 768px) {
    .page-hero.my-custom-class {
        background-image: url('URL TO YOUR IMAGE');
    }
}

Is that correct?

[Tom]

You shouldn’t need #2, as you’re not adding a video.

[Ighty]

Yes, I have a video by default, then on mobile I want a static image to save data.

[Tom]

So you want a video on desktop, and a background image on mobile? Not sure what you mean by saving data?

[Ighty]

Sorry if I wasn’t clear.

Video on desktop, background image on mobile is correct. By saving data I mean save data for downloading the video when you’re on mobile and on a mobile network.

[Tom]

Ah, in that case you can add this CSS:

@media (max-width: 768px) {
    .background-video {
        display: none;
    }
}

Then your regular background image should show through.

Let me know 🙂

[Ighty]

The CSS is working half way.

If I add the background image in elements > page hero > background image, I have these behavior:
on mobile: I see the image and not the video.
on desktop: I see the video and the image as an overlay. I don’t see the original light colour overlay. In elements I have “background overlay” disabled.

If I don’t add any image in elements > page hero > background image, I have these behavior:
on mobile: I don’t see the image, I don’t see the video.
on desktop: I see the video with a light colour overlay (maybe from the body background?). In elements I have “background overlay” disabled. This is how I want to see the header, with video and light colour overlay.

[Tom]

Any chance you can link me to your site so I can see? Feel free to open your own topic so you can use the private URL feature.

[Author]

Posts