title: Responsive Background Video
body: <p>I am looking to make my video background like this:
  <a href="http://www.teektak.com/" rel="nofollow">http://www.teektak.com/</a></p>
  
  <p>The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for the life of me how to make it so that it centers horizontally to the window when adjusted.</p>
  
  <p>Here is a link to the test site to see what I am talking about: <a href="https://robotplaytime.paperplane.io/" rel="nofollow">https://robotplaytime.paperplane.io/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted&gt;
          &lt;source src="images/robotPlaytimeVideo.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html,
  body {
      height: 100%;
      width: 100%;
      overflow: hidden;
  }
  video { 
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      min-width: 100%;
      min-height: 100%;
      z-index: -100;
      background: url(../images/robotPlaytimeVideo.png) no-repeat;
      background-size: cover;
  }
  </code></pre>