Archived topic

Header Background Video

6 replies · Started by Greg on November 21, 2020

Viewing posts 1–7 of 7

November 21, 2020 at 1:19 pm #1540452

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

November 21, 2020 at 2:17 pm #1540471

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

November 21, 2020 at 7:16 pm #1540568

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.

November 23, 2020 at 4:00 am #1542086

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

November 23, 2020 at 5:05 am #1542146

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/

November 23, 2020 at 1:56 pm #1543094

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

November 24, 2020 at 12:57 am #1543677

Yep, we are at the mercy of Apple :) You're welcome

This archived topic is closed to new replies.

Start building better websites today.