Background video element not autoplaying in safari or iphones

Hi,
a website I am working on for a client has a background video element in webflow.
This background video element will play ok in laptop and phones with android, but will encounter autoplay issue and ignore the not-display play button in safari browser on laptops and pretty much all iphones as well ( did a lambda test).

I have read several post on the matter, all of which were pretty old, and a generic clear working solution hasn’t been found.
For privacy reason I can’t link the website, since it is not public yet, but I hope you can help me .
What I would like to do is to tell safari browser and iphone to force autoplay, loop and mute the video. If I would be coding it without webflow platform, I would like to add the following attributes to the video html element, which should assist in playing muted videos on safari.

<video autoplay playsinline muted loop>

I saw previous solutions that mention to add to the body tag some custom code. All those solution won’t work for me and the topic got closed without a clear solution that work in most recent times. Therefore I would like to ask you if you have a solution on how to force background video elements to play on safari and on iphones without embedding the video, just with the tool background video element and If I can add some custom code to that to force it to autoplay, and mute it. If you know, it would appreciated if you clearly state the step to add and where, all is a bit confusing, reading the previous posts.
I thank you very much for your help, dont hesitate to ask more questions.
Screenshot 2022-08-04 at 11.46.52

Alternative:
I tired following some tutorials to go for embed a video.
I could recreate 3 different scenarios on a page on my website, that you can access with the psw: webflow
https://www.ludovicalei.com/test-video

and for more info on what’s happening inside refer to the read-only link:

https://preview.webflow.com/preview/ludovicalei?utm_medium=preview_link&utm_source=designer&utm_content=ludovicalei&preview=98c7f284b437138ae13447b9687a5171&pageId=62eba9ba07602b105f655434&workflow=preview

In section 1: I embed only one video with all the elements needed in order to autoplay

  • added before body tag code

In section 2: I embed one video but it is inside a wrapper class, and it is meant to work for multiple videos + added before body tag code

In section 3 : I tried with the background video element

All those method they won’t allow to play on safari browser, doesn’t matter if I am forcing it or not. Could you try to have a look ?

check also the thread Embedded video not playing/showing on mobile devices - #12 by JackHeathcote


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @Ludovica!

This sounds like what happens when the iPhone is in low power mode.

Low power mode on iOS stops videos from autoplaying. :slight_smile:

Hi Jono , no this is not happening only on low power mode, but always, also on safari and on all I-phone devices.

1 Like

Heya!

It’s a bit tricky to help without being able to checkout the issue on the live site. Which is understandable if you’re not able to share publicly just yet.

Have you tried submitting a support request? https://support.webflow.com

I tried to recreate the issue on a separate page, with non sensitive content. This should work to debug my issue. feel free to have a read again and the post and support if able to/ want to.