Html video background not working for iOS on Ionic framework

Question

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 Code:

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

CSS Code:

.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"/>

Am I missing something?

Answer 1

Are you using UIWebView or WKWebView? If you are using UIWebView I recommend you upgrade as it is no longer accepted by apple when you publish your app.

There is a lot of outdated information for both from ionic. Make sure you are looking at the latest.

https://github.com/ionic-team/cordova-plugin-ionic-webview

If you are using WKWebView, you should do the following:

Add ionic: to your content-security-policy's default-src and media-src entries. Do it on top of whatever you already have there.

<meta http-equiv="Content-Security-Policy" 
  content="default-src * 'self' ionic: data: gap: 
  https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline';
  media-src * ionic: 'unsafe-inline';">

Then in your *.component.ts get a local video URL that works by using

/*declarations*/
private win: any = window;
videoURL: string;

/* put this on onInit or a function you call to return your src
it will return "ionic://localhost/_app_file_/assets/videos/background.mp4"*/

this.videoUrl = this.win.Ionic.WebView.convertFileSrc('/assets/videos/background.mp4');


/* then in your html*/
 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src={{videoUrl}}>
    </video>
 </div>