Embedding full screen inline video as background

Today, there are many apps that leverage video as an animated background for the introduction screen. This makes the app more interesting and creative. The users feel that they are welcomed to the app. This tactic is great to impress new users and encourage them to return.

This section will teach you how to add a video with autoplay in the background:

You will also learn how to use animate.css to add custom animation to the app header text.

Getting ready

This app example could work either in the browser or on a physical device. However, it's optional that you connect your physical device to verify that the animation plays correctly in the background.

How to do it...

The following are the instructions to add a video with autoplay in the background:

1. Create a new VideoIntro app using the blank template, as follows, and navigate to the VideoIntro folder:

$ ionic start VideoIntro blank
$ cd VideoIntro

2. You will need to have your video ready at this point...