Let's start with the home.html file because that is the only page where you added the animation:

<video class="fullscreen-bg__video" autoplay loop muted 
 webkit-playsinline>  <source src="assets/Blurry-People.mp4" 
   type='video/mp4; codecs="h.264"' > 
  <source src="assets/Blurry-People.webm" type="video/webm"> 
</video> 

The preceding tag is just a typical <video> tag in HTML5. However, there is 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 fullscreen with the play control. The reason is that you want this video to play in the background, while you can animate text on top of it. This is the reason you need to enable this feature by setting AllowInlineMediaPlayback in config.xml.

The second item in this template is your header and subheader, as follows:

<div class="center animated zoomIn"> 
  <h1>Beautiful App</h1> 
  <h2>Fast. Easy. Cheap.</h2> 
</div> 

Note that there are animated and zoomIn classes included. These are the required classes for animate.css to kick in. If you run the app now, you will see the text starting to appear from a smaller size to a bigger size (that is, a zoom-in effect).

The home.scss file is important because it has a lot of animation logic. Let's take a look at the header text first:

.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; 
  } 
    
} 

One interesting thing here is the use of the text-shadow attribute. This is because you want to create a thin border line around the text so that your white text can be easily seen on top of a light background.

To set the video to fullscreen, you will need it to have a negative index so that it's below the other layers. Also, the height must be 100%, as follows:

.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%; 
} 

Finally, in order to position the text vertically in the center, you have to create the following class:

.center { 
  top: 50%; 
  transform: translateY(-50%); 
  position: absolute !important; 
  text-align: center; 
  width:100%; 
} 

The center class forces the element to have top of 50% but then pushes the Y position -50% to reset the vertical pivot of the <div> tag in the middle area. You will rarely need to customize such classes; thus, it's good to keep the center class handy for future use.