How to add Ionic video background

An Ionic is a front-end framework for developing cross-platform apps with web technologies like Angular, Vue, and React. We can easily add an ionic video background to our apps. With the release of Ionic 4 we can also create PWA applications and video backgrounds are mostly used in mobile applications.

In these articles, we will learn the following

Add full embedded video background in ionic 5 and above.
Add font from google fonts to our application.
Adding animate.css library in our application example to display the zoom effect for text.

I have tested this app in Android-only, you can test in IOS also. Screenshot of our example on both desktop and android.

Installing the Ionic CLI
If you have not yet installed an Ionic CLI on your system. Then we need to install an Ionic CLI first. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. In our previous articles, we have discussed how to install Ionic in Ubuntu and fix npm permission. To install the Ionic CLI, open a terminal, and run the following command:

npm install -g @ionic/cli

Setting up Ionic Video background Apps

Make sure you must have the latest version of Ionic CLI installed on your system. With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. In these articles, we will learn Ionic and create an Ionic video background based on an Angular.

ionic start videoIntro blank --type=angular

We need to download the video from http://coverr.co website and add the download a video file assets folder of src/video/background/ all video file extract.

Importing Google font for video background Apps

Once we have created our application, we first implement how to add Google font in our application. We need to import lobster fonts google font in our project and import Inside the src/index.html add the following code

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

before the end of the head tag. Google font is a popular font library provided by Google, It provides popular fonts which every application used. Like any other CSS file, we need to add Google font using link tag in index.html.

Step 4: We need to import the animate.css library in our project by install
>> npm install animate.css –save
We also need to import the animate.css file link in our src/global.scss at end of the global.scss file

@import '~animate.css/animate.min.css';

Step 5: Add the following code in home.page.html

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

We have class animated and zoomIn classes that include an in-home template, these classes are from animate.css, which animate text in zoomIn motion when the page started.

Step 6: Add the following code to the home.page.scss

ion-content {
    font-family: 'Lobster', cursive;

    h1 {
      font-size: 5rem;
    }
    h1, h2 {
      color: #fff;
      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;
       
    }
      
    .fullscreen-bg {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
    }
      .center {
        top: 50%;
        transform: translateY(-50%);
        position: absolute !important;
        text-align: center;
        width:100%;
    }
}

Conclusion
Finally, we have completed the Ionic video background tutorial with an example. In this tutorial, we learned how to add video background in the Ionic app.

Related posts

How to add Ionic video background

How to add Ionic video background

Setting up Ionic Video background Apps

Importing Google font for video background Apps

Leave a Reply Cancel reply