Different header background video on Mobile?

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

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

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

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?

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

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

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

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.

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

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.

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.