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

Question

我正在使用 this显示视频网格的插件。单击网格项会弹出一个视频容器，您可以在其中查看视频。我在使用此插件时遇到的问题是，它非常适合宽高比为 16:9 的视频。但是，对于高度大于宽度的视频，视频容器会垂直拉伸(stretch)并超出屏幕范围，并且视频看起来断断续续且缩放。如何固定容器的大小以使视频不被拉伸(stretch)。

这是视频容器的 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%;
}