[Resolved] Disabling page header video on mobile completely

[Iva]

Hi,

I’ve run into a bit of a problem with my Page Header on the homepage of my site.

Namely, I’ve added a background video to it (all three file formats) and I’ve added an image as well.

Now, on the phone, using Google Chrome it shows the image, and not the video which is correct. But using the default browser of the phone shows and plays the video directly. How would I go about forcing it to display the image and not the video?

Kind regards.

[Leo]

Hi there,

I just tested with Chrome, Firefox and Safari and it all worked as the default setting:
https://docs.generatepress.com/article/page-header-background-video/#background-video-on-mobile

What is the phone’s default browser?

Let me know 🙂

[Iva]

Hi,

With Chrome, Firefox & Safari things are working correctly, it’s the phones’ default browsers that are in question. I’ve tested with a Samsung Galaxy J7 and Xiaomi Mi 5 default browsers. They’re just called “Browser”, so they don’t really have a name.

This is a problem since a lot of people don’t bother downloading a better browser, they just use what’s in the box.

[David]

Hi there, we could try hiding the video container on those smaller devices like so:

@media (max-width: 360px) {
    .generate-page-header-video video {
        display: none;
    }
}

[Iva]

Hello, this has successfully removed the video from the mobile browsers!

However, now the image is not show (it’s only showing a white background, even though the image is loaded and is shown for a brief moment before disappearing).

[David]

Hi there, looks like a cache problem, this is what i see on iPhone:

[Iva]

Hi David,

This is what happens on a stock android browser:

[Tom]

Unfortunately the current video background uses the poster attribute to add the background image. That means hiding the video element will also hide the poster/background image.

In GPP 1.7 (https://generatepress.com/gp-premium-1-7/), I’ll be writing instructions on how to add the video background to your content. This will allow you to hide the video on mobile and display the background image only.

[Iva]

Hi Tom,

Thank you for the reply! Glad to know an update that tackles this issue is on the way.

[Tom]

No problem 🙂 I’ll update this topic once 1.7 is out.

[Iva]

Hi,

I saw the new Elements module that came with 1.7, though I cannot seem to find a way to insert a video into the header. Is this functionality omitted from 1.7?

I’m not sure whether to start a new topic because it is tied to the video header – we switched the site to https:// a couple of days ago and the video is still being server via http, which of course is causing the homepage to be unsecure.

[David]

Hi there,

this article explains how to add video to the page hero:

https://docs.generatepress.com/article/page-hero-background-video/

[Iva]

Hi, thank you for the link! It works like a charm. HTTPS is working now as well.

[David]

Thats great to hear. Glad i could help

[Author]

Posts