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 ,