title: Fullscreen background video and keep it centered
body: <p>I'm trying to create a site where I have a background video playing with some HTML5.
  This is all working perfectly, it works just the way I want it.
  But I also want to keep the image centered on the screen, even when a user resizes the browser.</p>
  
  <pre><code>&lt;video id="video" src="video/video.mov" type="video/mov" autoplay loop&gt;&lt;/video&gt;
  </code></pre>
  
  <p>I got this to work with some jQuery, but was wondering if there is a CSS solution for this.</p>
  
  <pre><code>function resizeHandler() {
          // scale the video
          var documentHeight = $(document).height();
          var documentWidth = $(document).width();
          var ratio = $('#video').width() / $('#video').height();
  
          if((documentWidth / documentHeight) &lt; ratio) {
              $('#video').css({
                  'width': 'auto',
                  'height': '100%',
                  'left': '0px',
                  'right': '0px',
                  'top': '0px',
                  'bottom': '0px'
              })
  
              var marginRight = $('#video').width() - $(document).width();
              $('#video').css('left', -marginRight);
          } else {
              $('#video').css({
                  'width': '100%',
                  'height': 'auto',
                  'left': '0px',
                  'right': '0px',
                  'top': '0px',
                  'bottom': '0px'
              })
  
              var marginTop = $('#video').height() - $(document).height();
              $('#video').css('top', -marginTop);
          }
      }
  </code></pre>
  
  <p>This is the jQuery I wrote to stretch the image to fit the screen, and to keep the image sort of centered.
  Not sure if this is possible in CSS, but if somebody knows how to, this might be nice.</p>