[Resolved] Header Background Video

[Greg]

Hi guys

I had a background video working on a header element across devices (desktop, mobile) but all of a sudden it seems to have stopped working on mobile – no changes to plugins, just minor CSS edits to other bits on the page. It now displays the play icon in Safari on my iPhone.

Any idea what may have caused this or what to look for?

<video loop muted autoplay playsinline poster="/wp-content/uploads/Video-BG.jpg" class="background-video">
    <source src="/wp-content/uploads/Video-Filename.mp4" type="video/mp4">
    <source src="/wp-content/uploads/Video-Filename.webm" type="video/webm"/>
    <source src="/wp-content/uploads/Video-Filename.ogv" type="video/ogg"/>    
</video>

<div class="background-video-content">
    <h1 class="header">Headline goes here.</h1>
</div>

Thanks
Greg

[Greg]

Ahh ha…

I don’t suppose anyone knows a way to force low power mode iOS devices to use the fallback image rather than loading the video with a play button?

Thanks
Greg

[Leo]

Hi Greg,

That is some excellent research! Thanks for letting us know 🙂

I don’t suppose anyone knows a way to force low power mode iOS devices to use the fallback image rather than loading the video with a play button?

Unfortunately that sounds like something that would need to be modified with iOs itself.

[Greg]

No problems, and I thought might be the case, I’ll keep searching and let you know if I find any workaround.

[David]

Hi there,

Similar topic here with a solution that i assume worked:

https://generatepress.com/forums/topic/background-video-script-for-low-power-mode-in-apple-safari/

[Greg]

Thanks David, adding that script has worked in one sense – it sets the video to play as soon as you interact with the page. It would have been ideal if it could force the autoplay or hide the play button altogether but the is far better than not being able to play the background video at all – and I understand it’s down to the OS and not the code.

Thanks for the help/link to the other thread, appreciated!
Greg

[David]

Yep, we are at the mercy of Apple 🙂 You’re welcome

[Author]

Posts