Video como aplicación iónica de image de background

Me preguntaba si había una manera de hacer un video de background multiplataforma sin usar GIF.

Al igual que el tutorial aquí , sin embargo, con MP4 y no GIF, ya que me gustaría usar un video más largo.

Me gustaría usar esto en una pantalla de inicio de session, como la aplicación Uber actual.

Esto debería funcionar: o al less ponerlo en la ruta correcta: ¿funcionará una vez comstackdo? No lo sé. También asegúrese de que su video sea lo suficientemente alto como para llenar el espacio. EDITAR: tuvo que eliminar el contenido de iones para hacerlo escalar a la derecha:

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