How to create a Landing Page with a video background in Ionic 4

ionic4, ionic, cordova, angular, tutorial

By Mitch ,

We've all seen it at least once. You open an app for the first time and you see a beautiful landing page with a catchy phrase, the login button in the center and a nice video playing in the background. And of course, you want one for your brand new app. To make a difference. So, let's make a difference!

Here is what we will end up with at the end of this tutorial:

Of course, you should take a video that loops perfectly. I took one of my personal videos for the demo (pretty cool huh ?), so it's not perfect.

If you're in a hurry, because global warming is coming too fast, or because you don't really like my humour (that hurts...). I made a sample app available on Github: ionic4-background-video-app. Clone it, run it, understand it!

But, but... And Ionic 3?

I'm doing this tutorial for Ionic 4, as I use a Web Component using Stencil for the background video (And I also maid an article to explain how I did it).

If you'd like to make it work in previous Ionic versions, it will work. You just need to understand the code of the background video Web Component and put it directly in your project as an Angular Component. You'll see how they look a lot alike.

here is the Github of the Background Video Web Component.

Generate a new Ionic application

Install Ionic, if it's not already done. I will not enter in the specifics on Ionic app creation. More information on the official documentation.

npm install -g ionic

Generate a new blank app by running this:

ionic start ionic4-background-video-app blank

You should get a directory structure like this:

And if you run:

ionic serve

You'll already get your app running in your browser:

The centered Content

First, we need to get this welcome message an login button vertically and horizontally centered in our home page.

Edit the Home HTML

Let's edit the homepage html in src/app/home/home.page.html:

<ion-content force-overscroll="false">
  <div class="page-centered-element">
    <div class="content">
      <h1>My awesome app</h1>
      <h5>My awesome catchphrase</h5>
      <div class="buttons-container">
        <ion-button>Login</ion-button>
      </div>
    </div>
  </div>
</ion-content>

Note the force-overscroll="false"  on the ion-content. That's to avoid content bouncing on iOS. See the ion-content documentation.

Edit the Home SCSS

And now the homage scss in src/app/home/home.page.scss:

.page-centered-element {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  text-align: center;

  .buttons-container {
    margin-top: 30px;
  }
}

Note that the  .page-centered-element  is something I use often in my applications (for loaders showing before a list gets loaded, for example). If you want to reuse it, put it in src/global.scss instead.

And we have a nice centered content on our homepage:

The background video

When I started searching on the web for an easy way of doing this, I stumbled upon some web tutorials that just gave me the basic html and css to make my video play in the background and in fullscreen. But I encountered several caveats along the way. And it took me almost a day to have it perfectly working, like we're expecting from a professional app. So I figured I would save you the trouble and make a Web Component out of it.

The Github repository is here : gl-ionic-background-video. The Readme explains everything to get this Component working in your Ionic 4 app, but let's go over the steps together. It's also well explained in the official Stencil documentation.

Allow Inline Video Playback for iOS

Without this configuration, on iOS, the video will play in a fullscreen player with controls. And we don't want that, do we?

For your video to play inline correctly on iOS, you need to add a specific line in your config.xml file:

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

If you don't have a config.xml file yet, that's because you did not add a Cordova platform (iOS or Android, or both).

To create an iOS app, run:

ionic cordova platform add ios

More information about that in the Ionic documentation.

Install with NPM

Install the Web Component with NPM:

npm install --save gl-ionic-background-video

Import it

Import it in the home module in src/app/home/home.module.ts:

import 'gl-ionic-background-video';

Include the Custom Element Schema

You also need to tell your page's module to allow non-angular elements, or you will get an error. Add the CUSTOM_ELEMENTS_SCHEMA to the list of schemas of you module. Here how the home.module.ts file looks like:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import 'gl-ionic-background-video';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // here is the schema declaration to add
})
export class HomePageModule {}

Call defineCustomElements

Call the defineCustomElements function from the Stencil component collection in your main.ts like this:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from 'gl-ionic-background-video/dist/loader'; // add this line

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window); // call the function here

Use it

parameters

This gl-ionic-background-video Web Component accepts 3 parameters:

  • The video source : src
  • The fallback image : poster
  • The mute state of the video : muted (defaults to true)

Under the hood, it's a simple html5 video tag with everything set to make it work properly.

Set a poster image or...

You have to set a poster image that is the first frame of this video and which is exactly the same size. Otherwise you'll get a big ugly video icon in background before the video loads on Android.

Use your video

Put the video and the poster image in the assets folder in src/assets:

Then add the gl-background-video html element in the ion-content of your home page html:

<ion-content force-overscroll="false">
  <gl-background-video src="assets/background-video/background-video.mp4" poster="assets/background-video/background-video-image.png"></gl-background-video>
  <div class="page-centered-element">
    <div class="content">
      <h1>Welcome</h1>
      <h5>This is a sample app</h5>
      <div class="buttons-container">
        <ion-button>Login</ion-button>
      </div>
    </div>
  </div>
</ion-content>

And voilà! It works!

Conclusion

We managed to make a perfectly working Landing Page with a background video playing in our Ionic 4 application!

If you want to see it in action, I made a Github repo with a sample App doing exactly that.

I hope you liked this tutorial. And don't hesitate to ask questions in the comments!

Mitch

Mitch

I'm a freelance full stack developer working in Paris. I love everything that involves websites and mobile apps. That includes startups, UX design, growth hacking, productivity and many more.

Read More