Video as Background image ionic app

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

Much like the tutorial here, however, with MP4 and not GIF as I'd like to use a longer video.

I'd like to use this on a login screen, like the current Uber app.

This should work: or at least put you on the right path: will it work once compiled? I do not know. Also make sure your video is high enough resolution to fill the space. EDIT: had to remove ion-content to get it to scale right:

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