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.
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:
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)
