https://twistwhatyouknow.webflow.io/
Embedded videos (using embed components with iframe code, or with Webflow video component) doesn’t seem to play on iOS mobile devices only. On desktop or on Android devices, when you hit the play button the video loads properly. However, on iPhones, hitting the play button doesn’t load the video and after a few tries pressing play, it says “unable to play video”.
I thought at first it was because I included the Vimeo API script and it was conflicting with the videos on iOS: <script src="https://player.vimeo.com/api/player.js"></script>
However, I then changed this so the script only loads (injected into head) if the window size is larger than a mobile device, but the videos still don’t play on iOS.
If you scroll down about half way through the page, you’ll see the video here:
Attempting to hit play on that video doesn’t work and I’ve tried each of these 3 ways:
-
Use embed component with content as:
<iframe src="https://player.vimeo.com/video/410551514?title=0&portrait=0&playsinline=false" style="width:100%;height:100%" frameborder="0" allow="autoplay;" allowfullscreen></iframe> -
Use Webflow “video” component with URL: https://player.vimeo.com/video/410551514
-
Use Webflow “video” component with public URL: https://vimeo.com/410551514
I’ve even tried creating a completely separate page in case there were conflicts with the rest of the page: https://twistwhatyouknow.webflow.io/video-test
This page includes all 3 attempts above, but none work on iOS.
Any ideas would be great!
Thanks,
Andrew
Here is my site Read-Only: https://twistwhatyouknow.webflow.io/
(how to share your site Read-Only link)