Ahmed Mujtaba Ahmed Mujtaba - 1 month ago 7
CSS Question

shrinking html video to the size of the parent container without using overflow hidden

How do I shrink a video element to the size of it's parent container without using

overflow:hidden
on the parent container? Currently the video stretches beyond the height of the parent container as shown in the image below:

enter image description here

I want to shrink the video height so it fits the parent container.

Here's the html and css for the image above:

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


.cbp-popup-lightbox-iframe {
position: relative;
padding-bottom: 56.25%;
background: #000;
}


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

Answer
video {
  height: 100%;
  max-width: 100%;
}

That should fix the height to the parent and not let the width get wider than the parent. I'm not in a position to test it, but it seems reasonable. :)

Comments