Background video not working properly on IOS devices

I’m having trouble with my background video on my homepage, it currently works perfect on Android devices and desktops, however when an IOS device loads up the homepage the video will be a still image until the user interacts with the page (i.e scrolling or touching the screen) and THEN it will work. I tried pasting this code snippet i found

The bgVideo element is set to autoplay so i don’t see why this only works on android’s and desktops

Please let me know what i can do to fix this.

Here’s the link : http://kareems-wondrous-project.webflow.io/

Here’s my READ ONLY link : https://preview.webflow.com/preview/kareems-wondrous-project?utm_source=kareems-wondrous-project&preview=418aed7d7fe2a0098b158431a324b4d6