title: Resizing <video> element to parent div
body: <p>Has anyone been able to successfully resize a <code>video</code> element to a parent div?</p>
  
  <p>My video element contains a webcam stream that comes in with a <code>ratio of 4:3</code>. I'd like to break the ratio and adjust it to the div size. I've tried the following:</p>
  
  <ul>
  <li>Set <code>width and height 100%</code> > this doesn't do anything, 4:3 remains</li>
  <li>Set <code>min-height and min-width 100%</code> > this makes the video resize to something really huge that overflows the div</li>
  <li><code>position:absolute, bottom, top, left and right: 0px</code> also a huge flow over the parent div</li>
  <li>Using javascript to get the parent divs height and width, then setting it for the video: No effect, 4:3 ratio remains, no size change.</li>
  </ul>
  
  <p>How to do it?</p>
  
  <p><strong>EDIT</strong>: Thanks Gaurav for that greatly detailed reply. It looks good, I wish it would work for me though.</p>
  
  <pre><code>.parentDiv // Results in around 400x400 pixels for me
  {
      position: absolute;
      top: 11px;
      right: 10px;
      left: 10px;
      height: -webkit-calc(50% - 18px);
      height: calc(50% - 18px); 
      display: block;
  } 
  </code></pre>
  
  <p>My video element is in there, I gave it your CSS solution. Unfortunately it only turned white. Could my parentDiv css have anything to do with that? </p>
  
  <p><strong>EDIT 2</strong>: Here's the HTML:</p>
  
  <pre><code>&lt;div class="parentDiv"&gt; 
      &lt;video class="cam_video" autoplay&gt;&lt;/video&gt;                      
  &lt;/div&gt;
  </code></pre>
  
  <p>This is mainly it . The src-attribute of the video is set to my webcam stream.</p>
  
  <p><strong>EDIT 3</strong>:</p>
  
  <p>If I right-click and inspect the white (now red scribbled) part in this screenshot <a href="https://s22.postimg.cc/th4ha8nmp/ratio2.png" rel="noreferrer">https://s22.postimg.cc/th4ha8nmp/ratio2.png</a>, Chrome shows me that the white also belongs to the stream.</p>
  
  <p>It seems as if the stream of the webcam comes along with white stripes at the top and bottom. This is.. annoying.</p>