Video Header Questions

[Chris]

Hello,

I’ve added some video headers successfully on a few sites I’ve built recently and was surprised to see that the videos are also loading on my Samsung Galaxy S10 and some friends’ newer iPhones. I thought it was a universal default to only show the fallback image on mobile? This happened without any special settings being adjusted in any mobile browsers.

That said, one client who uses an older iPhone said that it showed the fallback image with a Play icon located on it that was non-functional. I imagine that is some piece of the system letting her know that a video was there but it was non-functional.

Any thoughts on the above situation would be appreciated. Specific questions below.

Question 1: Is there a way for me to manually disable header videos on all mobile devices regardless of brand, model, etc?

Question 2: I’m starting a new build for a friend and her header video looks great on desktop but her face is too far off the screen on mobile. Is there a way to adjust the positioning of a header video on mobile?

Thanks for your help!

[Chris]

I feel like I put those questions in the wrong order.

Ideally, I would like to keep the header video rolling on the mobile devices that support it, but only if I can reposition it to show her properly. Otherwise, it’s best to just disable it on mobile across the board.

[Tom]

Hey Chris,

I’m not sure if it’s possible to target browsers that support it, but I’ll ping David in case he knows a trick.

To disable them on mobile, you can do this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

Most mobile device OSs support autoplay videos as long as they are Muted. Aside of the device being old – videos won’t autoplay if the device is in Power Saving mode.

Repositioning background videos unfortunately there isn’t an easy option like there is for background images.

I would suggest that you don’t merge the header on mobile. Then you can reduce the mobile top and bottom so the header element and original video have a similar aspect ratio – then the whole video can be seen.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts