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

这应该将高度固定到父级，而不是让宽度比父级宽。我无法测试它，但这似乎是合理的。 ：）