Embedded full screen video background

We can easily add background video to our apps.

Step 1: ionic start VideoIntro blank –v2
Step 2: We need to download the video from http://coverr.co website and add the download file assets folder of src.

Step 3: Inside the src/index.html add following code

<!-- Google Fonts -->
 <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

before the http://cordova.js and  add the following animate.css file

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

before the body and head tag.

Step 4: Add the following code in home.html

<ion-content class="home">
  <div class="fullscreen-bg">
    <video class="fullscreen-bg_video" autoplay loop muted webkit-playsinline>
      <source src="assets/Blurry-People.mp4" types='video/mp4; codecs="h.264"'>
      <source src="assets/Blurry-People.webm" types="video/webm">
    </video>
  </div>
  <div class="center animated zoomIn">
    <h1>Beautiful App</h1>
    <h2>Fast, Easy. Cheap .</h2>
  </div>
</ion-content>

In the video tag, we have a new attribute called webkit-playsinline. This means that you want the video to play where it is on the HTML page and not open it up full screen with the play control. The reason is that we want this video to play in the background, while we can animate text on top of it. This is the reason we need to enable this feature by setting AllowInlineMediaPlayerback in config.xml
We have class animated and zoomIn Classes include in home template, these class are from animate.css

Step 5: Add the following code in home.scss

.home {
  font-family: 'Lobster', cursive;
  color: white;
  text-shadow: 1px 0 0 gray, -1px 0 0 gray, 0 1px 0 gray, 0 -1px 0 gray, 1px 1px gray, -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray;
   
  h1 {
    font-size: 5rem;
  }
    
}
 
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}
 
.fullscreen-bg_video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
 
.center {
  top: 50%;
  transform: translateY(-50%);
  position: absolute !important;
  text-align: center;
  width:100%;
}

Step 6: We need to add the following code inside widget section of config.xml file.

<preference name"AllowInlineMediaPlayerback" value="true">