Html video background not working for iOS

ionic-v1
1

I’m trying to get a full screen video background for my Ionic app, it works perfectly fine on Android and the Browser, but when I run the app on an iPhone in Xcode simulator, it’s just a white background and the video doesn’t load.

Html:

 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src="/assets/videos/background.mp4" type="video/mp4">
    </video>
 </div>

CSS:

.fullscreen-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  height: 100vh;
}

I’ve also added this in the config.xml file

<preference name="AllowInlineMediaPlayback" value="true"/>