Ahmed Mujtaba Ahmed Mujtaba - 10 months ago 43
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

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>

.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 Source
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. :)