Make Webflow's Background Video PLAY on iOS and Android

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.

11 Likes

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.

1 Like

Hi, just came across this post because my website was malfunctioning on iOS. Found a solution that should work for anyone who has this issue:

2 Likes

Wish I knew that earlier! :smiley:

Thank you!!! I would have not gathered this

Yes, this works! Thank you so much!

Thank GOD! I was having such a difficult time tryong to figure out why my video wasn’t playing as it should. Your a life saver

Hello, I believe that this code does not work anymore… Is there any way to update it? :slight_smile:

Hi I know this is an old post but I used the code and it worked initially, but now it’s just gone back to not playing on mobile. Why would that be?

Maybe the recent iOS update?

Yes. Neither of the old fixes works anymore. I’m guessing due to the iOS Update as well. Any new fixes?

Yup! I just noticed this too.

still works for me on a reletively new android,… not on iphone 6s

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.

3 Likes

I would prefer to save my battery. Thanks.

You’re a genius brother!!!

Does anyone have a solution to this problem? The custom code did not work for me. I only experience this issue on iPhones on battery-saving mode.

2 Likes

thank you for this!!!

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.

@timothy.r

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.

1 Like