schrumpfen HTML-Video auf die Größe des übergeordneten Containers ohne Überlauf versteckt

Question

Wie schrumpfe ich ein Videoelement auf die Größe des übergeordneten Containers ohne overflow:hidden auf dem übergeordneten Container zu verwenden? Derzeit erstreckt sich das Video über die Höhe des Behälters Eltern, wie unten in der Abbildung dargestellt:

ich das Video Höhe verkleinern möchten, damit es den übergeordneten Container passt.

Hier ist das HTML und CSS für das Bild oben:

<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; 
    } 

ich die Höhe des übergeordneten Containers ändern möchten die Breite konstant zu halten, aber die Höhe ändert sich mit der Breite.

Answer 1

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

Das sollte die Höhe an die Eltern zu beheben und nicht die Breite breiter als die Eltern werden. Ich bin nicht in der Lage, es zu testen, aber es scheint vernünftig. :)