title: My jquery script is adding white space to html5 video
body: <p>I'm using this jquery snippet to make sure my html5 background video stays centred, full-screen and properly aligned.
  `</p>
  
  <pre><code>$(document).ready(function() {
  
  var $win = $(window),
      $video = $('#full-video'),
      $videoWrapper = $video.parent();
  
  function scaleVideo() {
      var isWider = ( $video.width() &gt; $videoWrapper.width() ) ? true : false,
          isTaller = ( $video.height() &gt; $win.height() ) ? true : false,
          widthDifference = $video.width() - $videoWrapper.width(),
          heightDifference = $video.height() - $videoWrapper.height();
  
      ( isWider ) ? $video.css('left',-parseInt(widthDifference / 2)) : $video.css('left', '0');
      ( isTaller ) ? $video.css('top', -parseInt(heightDifference / 2)) : $video.css('top', '0');
  }
  
  scaleVideo();
  $win.resize(function() {
      scaleVideo();
  });
  });
  </code></pre>
  
  <p>`</p>
  
  <p>At first it wasn't doing anything at all so I added the $(document).ready(function() around it. Now it works except for some reason when I reload the page there is white space (~20px) that appears on the right side of the video. If I adjust the size of the browser window at all it disappears but reappears again if I reload/refresh the page.</p>
  
  <p>here's a link to it in action: <a href="http://wabi-sabi.cc" rel="nofollow">http://wabi-sabi.cc</a></p>
  
  <p>This is the html:</p>
  
  <p><code>&lt;body&gt;
      &lt;div class="slide-wrapper"&gt;
          &lt;div class="full-video-wrapper"&gt;
              &lt;video id="full-video" muted preload autoplay loop&gt;
                  &lt;source src="videos/wabisabiwebvideo.webm" type="video/webm"&gt;
                  &lt;source src="videos/wabisabiwebvideo.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></p>
  
  <p>And here's the css:</p>
  
  <pre><code>.slide-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  .full-video-wrapper {
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  overflow: hidden;
  }
  
  #full-video {
  display: block;
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }
  </code></pre>
  
  <p>Thanks for your help!</p>