Background Video Won't Start Autoplay

Hi
I have created a background video and its not playing the video on mobile view.
In desktop version it works fine but on mobile it won’t start till i press “start” button. Its on Autoplay mode, and loop video.
Thanks


Here is my site Read-Only: [Webflow - Clean Effect]
Live Site: [ Clean Effect (webflow.io)]
(how to share your site Read-Only link)

Is it muted? Most browsers won’t autoplay a video unless it’s muted.
Many mobiles will also only autoplay when they’re connected to a wifi network.

Thank you.
The video has no audio

You’d still need to mute it.

Can I do it without custom code?
I inserted a custom code for that, but maybe Webflow has an option for it?

Ah apologies I misread- if this is a background video actually using the background video element, then the audio is stripped and you don’t need to do anything special.

If it’s not playing, on mobiles, its because the mobile browser your on has decided not to- nothing wrong with the video config itself.

Best guess is the phone isn’t on wifi, but it could be any number of policies that keep it from playing.

Mobile browsers often block autoplay for videos with sound to save data and provide a better user experience. You might want to try muting the video or adding the “muted” attribute to the video element. That can sometimes help with autoplay on mobile.

After the “muted” attribute added, it works but not every time. For example, it does paly on Iphone 14 but not on Iphone 15…

I was having this same problem and tried everything I’ve read in the forum. I ended up converting my videos from .mov to .mp4 and uploading again. That did the trick and now my videos play on iPhone. Hope that helps.

I had the same issue and I could not have my background videos Autoplay or even simply Play on IOS ( so frustrating !! ). After trialling with embedding some Vimeo iframes ( which was not completely satisfying ) , I finally went for Tim Ricks’ solution that is basically taking the same code as a background video element as Webflow but removing the second format .webm type that Webflow automatically creates in the component, only keeping the .mp4 in the code. That did the trick for me and everything works brilliantly now ! but this is still impossible to make the native component work !

Here is the link to Tim Ricks’ brilliant ( as always! :slight_smile: ) video + cloneable :

doesn’t seem to work for me! what version iphone do you have?

Background Videos never work consistently for me either.
Even on the same browser and device they sometimes do autoplay or not autoplay, do play or dont play at all.
Incomprehensible for me that this is the state of a basic element.

Check if your phone is on “low power” mode. This was the issue for me. Once I turned it off it worked fine.

1 Like

Another thing that might be preventing it from auto playing is if you have the “Reduce Motion” setting turned on (Mac users). You can find it inside System Settings → Accessibility → Display → Reduce Motion.

I usually keep it off. The OS feels snappier.