Video Background in Android


#1

Dears i’m using the below snippet to add a video background in my ionic App

it was working fine on both iOS and Android

but recently i noticed that it’s not working properly in android , i get a white space in the bottom (Video is cutting) in the Android device .

=========================================
.html
<ion-header class=“titleicon”>

<ion-navbar hideBackButton transparent>

<ion-title></ion-title>

<img src=“assets/imgs/Logo.png” class=“banner” />

</ion-navbar>

</ion-header>

<!-- End of Login Header …–>

<ion-content fullscreen no-bounce class=“no-scroll”>

<video id = “backgroundvideo” autoplay muted loop webkit-playsinline playsinline src=“assets/videos/Login.mp4”></video>

</ion-content>

<!-- End of Video Content -->

<ion-footer padding left no-border>

<img src=“assets/imgs/loading.png” class=“loader” id=“loading”/>

<ion-list left class=“items-left”>

<ion-item no-padding >

<span item-start><ion-icon name=“person”></ion-icon></span>

<ion-label float>ID</ion-label>

<ion-input type=“number” #corpID [(ngModel)]=“username” (ngModelChange)=“change($event)” pattern="[0-9]*"></ion-input>

</ion-item>

<ion-item no-padding >

<span item-start><ion-icon name=“lock”></ion-icon></span>

<ion-label floating>Password</ion-label>

<ion-input type=“password” #password></ion-input>

</ion-item>

<ion-buttons padding>

<button ion-button full round (click)=“login(corpID,password)” style = “background-color: #537790”>Login</button>

</ion-buttons>

</ion-list>

</ion-footer>

<!-- End of Footer -->

=========================================
.css
#backgroundvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
}

=========================================
ionic Info

Ionic:

ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.10

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 12 other plugins)

System:

Android SDK Tools : 25.2.5 (/Users/BayanSeddiek/Library/Android/sdk)
ios-deploy : 1.9.2
NodeJS : v8.9.4 (/usr/local/bin/node)
npm : 6.1.0
OS : macOS
Xcode : Xcode 10.1 Build version 10B61

=========================================

Any Help plz

Thanks ,