[Resolved] Hero background video not working on mobile

[Alicja]

Hi, I have used a video as a hero background based on the instructions from this post: https://docs.generatepress.com/article/page-hero-background-video/. It works well on a desktop, but it is not playing on my iPhone (I see just an image). Did I miss something?

Website URL: https://spicewoodpianotuning.com/

[Ying]

Hi Alicja,

Try add playsinlineto your code, something like this:

<video loop muted autoplay playsinline poster="URL/TO/poster.jpg" class="background-video">
    <source src="URL to your video" type="video/mp4">
</video>

[Alicja]

It works! Thank you!

[Ying]

No problem 🙂

[Brenden]

I tried the same technique, but I cannot get background video to play on mobile.

https://fieldofflight.com/

[David]

Hi there,

it works on my iPhone. Make sure the device isn’t low power mode as that will generally stop videos loading.

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

[Brenden]

I think it was low power mode. Thank you!

[David]

You’re welcome

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

[Author]

Posts