修复视频容器大小，使视频不会超出它

Question

我正在使用this插件来显示视频网格。单击网格项会弹出一个视频容器，您可以在其中查看视频。我使用这个插件的问题是，它适用于宽高比为16：9的视频。但是，高度大于宽度的视频，视频容器垂直拉伸并离开屏幕，视频看起来不稳定和缩放。如何修复容器的大小，以便视频不会被拉伸。

以下是视频容器的HTML：

<div class="cbp-popup-wrap cbp-popup-lightbox cbp-popup-lightbox-isIframe cbp-popup-ready" data-action="close" style="display: block;"><div class="cbp-popup-content">
  <a href="/video/179/sdvsdd.aspx"></a>
  <div class="cbp-popup-lightbox-title">
    <a href="/video/179/sdvsdd.aspx">sdvsdd
      <div class="cbp-popup-lightbox-iframe">
        <video controls="controls" height="auto" style="width: 100%">
          <source src="/stream/stream.ashx?f=p1b0aqijn7115fsud1o2n9m53i83_5.mp4&amp;u=kahmed&amp;max=3000" type="video/mp4">Your browser does not support the video tag.</video>
      </div>
    </a>
  </div>
  </div>
  <div class="cbp-popup-loadingBox">
  </div>
  <div class="cbp-popup-navigation-wrap">
    <div class="cbp-popup-navigation">
      <div class="cbp-popup-close" title="Close (Esc arrow key)" data-action="close"></div>
      <div class="cbp-popup-next" title="Next (Right arrow key)" data-action="next" style="display: block;">
      </div>
      <div class="cbp-popup-prev" title="Previous (Left arrow key)" data-action="prev" style="display: block;">
      </div>
    </div>
  </div>
</div>

以下是高度大于宽度的视频：

尺寸合适的视频看起来像这样（这就是我想要的上述视频）

如果我将<video>的高度设为100％，则视频会消失。将其设置为固定高度会缩小视频，但容器的大小保持不变，如下所示：

来自支持的人指示我使用以下属性：

.cbp-popup-lightbox-isIframe .cbp-popup-content {
width: 35% !important;

}

这使视频看起来如下

但这不是我想要的。我希望容器保持固定的大小，并使视频适合容器。我现在已经坚持了一段时间并且还没弄明白该怎么做。 任何帮助或建议表示赞赏。

Answer 1

试试这个： -

<video width="400" height="300" ... 

<iframe width="400" height="300" ... 

<object width="400" height="300" ...

<embed width="400" height="300" ... 

链路： - https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

或

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 2

Bootstrap提供了一些类，允许您将视频保存在容器内并具有正确的尺寸。这些课程为embed-responsive，然后是embed-responsive-16by9或embed-responsive-4by3。 请参阅this。