Embedding full screen inline video as background

Today, there are many apps leveraging 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 come back.

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 is playing correctly in the background.

How to do it...

Here are the instructions:

1. Create a new VideoIntro app using the blank template, as shown, and go into the VideoIntro folder:

   $ ionic start VideoIntro blank --v2
   $ cd VideoIntro
   

2. You need to have your video ready at this point. However, for this example, let's download a free video...