Papillard/video-banner.html

## video-banner.html

<html>
  <head>
    <style>
    body {
      margin: 0px;
    }
    .header-video {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    video {
      position: inherit;
      min-height: 100%;
      overflow: hidden;
      z-index: -1;
    }

    .header-video-content {
      position: absolute;
      text-align: center;
      z-index: 1;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .header-video-content h1 {
      font-size: 70px;
    }
    .header-video-content p {
      font-size: 30px;
      font-weight: lighter;
    }
    </style>
  </head>
  <body>
    <div class="header-video">
      <div class="header-video-content">
        <h1>We love video banners</h1>
        <p>They are so swag</p>
      </div>
      <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop>
          <source src="https://d3mlfyygrfdi2i.cloudfront.net/a144/hploop_0204.mp4" type="video/mp4">
      </video>
    </div>
  </body>
</html>