title: I want to make a video background, and I need the video to change size relative the screen resolution, without zooming the video in
body: <p>I have recently been having a problem with a video background. The video background itself is working fine, it was rendered for me by a friend in 4k and I was able to input it into my background via this code:</p>
  
  <p>Html=</p>
  
  <pre><code>&lt;video autoplay loop muted poster="css/videobackground/poster.png" id="video-bg"&gt;
      &lt;source src="css/videobackground/GLitch4.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
  &lt;/video&gt;
  </code></pre>
  
  <p>Css=</p>
  
  <pre><code>#video-bg {
      position: fixed;
      right: 0;
      top: 0;
      width: 100%     !important;
      height: auto    !important; 
      z-index: -1;
      background: transparent url(videobackground/poster.png) no-repeat;
      background-size: cover;
  }
  </code></pre>
  
  <p>It's supposed to be really simple, but after testing it on a a heap of different screen sizes throughout my school, at home and at friends houses, each with very different resolutions. I found that on the thinner screens, using this exact code made a white strip appear along the bottom of the screen:
  <a href="http://i.imgur.com/2Zt3r7a.jpg" rel="nofollow">http://i.imgur.com/2Zt3r7a.jpg</a>
  I fixed this by changing the width and height to:</p>
  
  <pre><code>width: auto     !important;
  height: 100%    !important;
  </code></pre>
  
  <p>But this means that on very widescreen computers, it creates a white strip along the left side of the screen:
  <a href="http://i.imgur.com/SSFz6fw.png" rel="nofollow">http://i.imgur.com/SSFz6fw.png</a>
  I have also tried making both the width and height set to 100%, but on wide screens, this makes two white strips appear either side of the video (or the background image) and on very thin/tall screens, white strips appear on the bottom and top of the screen (or the background image). The one other thing I have tried is making both width and height set to auto/cover (both do the same thing):</p>
  
  <pre><code>width: auto     !important;
  height: auto    !important;
  </code></pre>
  
  <p>Which works, it makes the video full screen and not create any white strip on any screen resolution, <strong>but</strong>, it makes the video appear very zoomed in and I can no longer get that very clean, 4k look to the video. Instead it looks pixelated and extremely zoomed in.</p>
  
  <p>I am wondering if anyone can help me set parameters to the video so it's full screen on any resolution <strong>without</strong> making it zoomed in. This may mean that the video is stretched/squished on some screens, but I would rather have the stretched/squished effect to the video than white strips down the sides and bottom/top or the zoomed in affect. If anyone can help, please do. (I have external javascript files, so if this problem requires javascript or JQuery, that's fine.)</p>