title: Background video that resizes to always fit the browser
body: <p>I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like <a href="http://spotify.com/" rel="nofollow">Spotify's</a> homepage background but cannot seem to make it work.</p>
  
  <p>My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.</p>
  
  <p>My current code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;VideoBG&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  
  #videohome {
      position:absolute; 
      height: 100%;
      width: 100%;
  
      top:0;  
      left:0;  
      right:0;  
      bottom:0;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
          &lt;video  id="videohome"  preload="auto" autoplay="true" loop="loop" muted="" volume="0"&gt;
              &lt;source src="./homepage.mp4" type="video/mp4" /&gt;
          &lt;/video&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>