For anyone who ran into this problem: Safari on iOS will not autoplay video if your phone is on Low Battery Mode. Turn this off and the autoplay should work as normal with this code.
Saving someone the trouble of having to figure this out the hard way like I did.
Thanks for this clarification, I got the play button all of a sudden and was stumped why since it was working fine a moment ago - now it all makes sense.
As of Dec 2021, iOS stops background videos from automatically playing if the user is on âlow-powerâ mode. The only potential work around that Iâve found is converting the background video into a JSON using bodymovin / after effects. The downside to this approach is that a JSON file may be larger than a typical MP4 file depending on how you export/create the JSON file.
I have to say, thatâs a shocking answer from a âcommunity leaderâ on Webflow.
Seems like a new 2024 update has just stopped background videos from working at all on mobile - even with Webflowâs built in play/pause⌠so because people like yourself have decided what THEIR preference is, thousands of people hours spent trying to create immersive experiences are now being wasted as they try to overcome this⌠YET AGAIN.
Well done.
In the meantime, for anyone else who will undoubtedly stumble back onto threads like this, if you find an answer, please post it.
Not even Timothy Ricksâs embedding within a CMS item works any more.
People get confused by this often, but Jeff is a developer & designer, just like you, not a Webflow employee. He gets zero input into anything regarding Webflowâs features or changes. If Webflowâs changed something here, Jeff wasnât involved.
However for what itâs worth, I agree with Jeff here. A big part of a great UX is respecting a mobile userâs battery life, download performance, and data costs, so a good design would always seek to support that gracefully. Hacking around those safeguards - as a few of the posts here seems to advocate - doesnât serve anyone.
Ideally, Webflow emits code that lets the devices and device owners make that decision, and ideally, designers respect that âcontractâ to create the best user experience possible.