title: HTML5 background video resizing glitch
body: <p>NOTE: This is a follow-up question to <a href="https://stackoverflow.com/questions/11800124/html5-video-set-to-browser-full-screen-same-as-noborder-for-flash-movie">Html5 video set to browser full screen - same as noborder for flash movie</a></p>
  
  <p>I've wrapped the accepted answer's code within an event listener, this is the result:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              body, html {
                  width: 100%;
                  height: 100%;
  
                  margin: 0;
                  padding: 0;
              }
  
              #container { 
                  position: absolute; 
                  width: 100%; 
                  height: 100%; 
                  overflow: hidden; 
              }
  
              #player { 
                  position: absolute; 
              }
          &lt;/style&gt;
  
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(window).load(function () {
                  adjust = function () {
                      var $player = $('#player');
                      var $window = $(window);
  
                      $player[0].height = $window.height(); 
  
                      $player.css('left', (($window.width() - $player.width()) / 2) + "px");
                  };
  
                  adjust();
  
                  $(window).resize(function () {
                      adjust();
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
                &lt;video id="player" autoplay loop&gt;
                      &lt;source src="background.mp4" type="video/mp4" /&gt;
                      &lt;source src="background.ogv" type="video/ogg" /&gt;
                &lt;/video&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I resize my window <em>vertically</em> I get empty space aside.
  <img src="https://i.stack.imgur.com/CmrXa.jpg" alt="enter image description here"></p>
  
  <p>Any ideas to solve this?</p>