shrinking html video to the size of the parent container without using overflow hidden
<p>How do I shrink a video element to the size of it's parent container without using <code>overflow:hidden</code> on the parent container? Currently the video stretches beyond the height of the parent container as shown in the image below:</p>

<p><a href="https://i.stack.imgur.com/wi1jw.png" rel="nofollow"><img src="https://i.stack.imgur.com/wi1jw.png" alt="enter image description here"></a></p>

<p>I want to shrink the video height so it fits the parent container.</p>

<p>Here's the html and css  for the image above:</p>

<pre><code>    &lt;div class="cbp-popup-lightbox-iframe"&gt;
  &lt;video controls="controls" height="auto" style="width: 100%" __idm_id__="786433"&gt;&lt;source src="/stream/stream.ashx?f=p1b08gnvea8po1cbjdhi18pq19r23_5.mp4&amp;amp;u=annettehiggs&amp;amp;max=3000" type="video/mp4"&gt;Your browser does not support the video tag.&lt;/video&gt;
&lt;/div&gt;


    .cbp-popup-lightbox-iframe {
    position: relative;
    padding-bottom: 56.25%;
    background: #000;
   }
</code></pre>

<p>I want to change the height of the parent container keeping the width constant but the height changes with the width.</p>