- This topic has 7 replies, 2 voices, and was last updated 1 year ago by
Tom.
-
AuthorPosts
-
March 8, 2020 at 12:27 pm #1188896
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!
March 8, 2020 at 5:20 pm #1189042Tom
Lead DeveloperLead DeveloperHi 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-developmentMarch 8, 2020 at 5:25 pm #1189048skyder
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?
March 9, 2020 at 8:11 am #1189788Tom
Lead DeveloperLead DeveloperWe 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-developmentMarch 9, 2020 at 11:24 am #1189997skyder
Yes please! That would help a lot.
March 9, 2020 at 4:53 pm #1190224Tom
Lead DeveloperLead DeveloperThis 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-developmentMarch 26, 2020 at 12:11 am #1210347skyder
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!
March 26, 2020 at 9:52 am #1210984Tom
Lead DeveloperLead DeveloperNo problem π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.