オーバーフローを使わないで親コンテナのサイズにhtmlビデオを縮小する

Question

親コンテナでoverflow:hiddenを使わずにビデオ要素を親コンテナのサイズに縮小するにはどうすればよいですか？下の画像に示すように、現在のビデオは、親コンテナの高さを超えて広がって：私はそれが親コンテナに合うように、映像の高さを縮小したい

。

ここで上記画像のためのHTMLとCSSです：私は幅を一定に保ち、親コンテナの高さが、幅と高さの変更を変更したい

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

が。

Answer 1

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

これは、高さを親に固定し、幅が親よりも広くならないようにする必要があります。私はそれをテストする立場にはいないが、それは妥当と思われる。 :)