title: Video tag to fill 100% div regardless of ratios
body: <p>I am tying to have a video tag to fill 100% of a div:</p>
  
  <p>a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);</p>
  
  <p>b) fill a div, not the whole background;</p>
  
  <p>c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.  </p>
  
  <p>I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio. </p>
  
  <p>it works in the <a href="http://jsfiddle.net/Gloak/FCPW2/" rel="noreferrer">fidlle</a> .... maybe because the screen is small, maybe because fiddle is a better browser...</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="wrapper"&gt;
      &lt;div class="header"&gt;
       .....
      &lt;/div&gt;
      &lt;div class="out-video"&gt;
          &lt;video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%"&gt;
              &lt;source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm"&gt;
              &lt;source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video. </p>
  
  <p>Thank you for any suggestion in advance. </p>
  
  <p>PS. It seems that android family does not play the video!</p>
  
  <p>l</p>