How to do a Full Screen Video Like Spotify with Cordova iOS

This is a short tutorial on how to do a Splash Full Screen HTML5 video like Spotify on Cordova iOS.

Tweet
Share
Share
Pin

First me must change a feature in config.xml in the Cordova Project.

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

This is the HTML Mark Up for the Full Screen Video

<video id="splash-video"  preload="auto" autoplay playsinline muted loop src="img/video.mp4"></video>

This is the CSS Mark Up

#splash-video{

    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);

}

I have also created a project so you can see the full example. 

Cordova Project: https://github.com/thecodebeast/full-screen-video-cordova-ios-html5