Load different video depending on de device

[skyder]

Hello everyone!

I am trying to create a Page Hero Element with a video for a background, however I’m currently struggling to find an answer for how to do this.

I have followed the guide here and managed to load a single file as webm, but now I have hit two roadblocks:

First, is there any way to only send a particular Element depending on the browser type (desktop or mobile)?

And then, is there any way to have the video autoplay on both Android and iOS (only works on Android so far)?

Thanks for the help!

[Tom Lead Developer]

Hi there,

Are you wanting to hide the entire Header Element on desktop or mobile?

I think iOS intentionally disables autoplay, I’m not sure it’s possible to bypass that.

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

[skyder]

Hi, I need to display a vertical video on mobile devices, and a horizontal one on desktop only, so I tried to create two header elements to achieve that and setting display rules to select which ones to use.

As for the autoplay, that’s too bad then. Is there any way to set a thumbnail as a placeholder then?

[Tom Lead Developer]

We don’t currently have an option to choose device-type in our Display Rules.

You could set a background image, then hide the background video on mobile with some CSS.

Let me know if you need help with that 🙂

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

[skyder]

Yes please! That would help a lot.

[Tom Lead Developer]

This will hide the video on mobile:

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

Then you’ll just need to upload a featured image 🙂

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

[skyder]

Thanks Tom!

It seems it worked, but the client issued a request for a different layout, so I had to start over -_-

Thanks for the help though!

[Tom Lead Developer]

No problem 🙂

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

[Author]

Posts