Geek Answers Handbook

Ion application

I was wondering if there is a way to make cross-platform background video without using GIF.

As in the tutorial here , however, with MP4 and not with GIF, as I would like to use a longer video.

I would like to use this on the login screen, for example, in the current Uber application.

+5
source share
1 answer

This should work: or at least put you on the right track: will it work after compilation? I dont know. Also make sure your video is high enough to fill in the blank. EDIT: I had to remove the ion content to get the correct scaling:

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> </head> <body ng-app="app"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Awesome App</h1> </ion-header-bar> <video autoplay loop poster="" id="bgvid"> <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4"> </video> </ion-pane> </body> </html>

CSS

 #bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(http://video.webmfiles.org/big-buck-bunny_trailer.webm) no-repeat; background-size: cover; }

Playground: http://play.ionic.io/app/5157ac74b69b

+2
source

More articles:


All Articles