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

【问题标题】：Fixing the video container size so the video doesn't stretch beyond it修复视频容器大小，使视频不会超出它
【发布时间】：2017-03-12 19:23:53
【问题描述】：

我正在使用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;

}

这使得视频如下所示

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

【问题讨论】：

标签： html css video

【解决方案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%;
}

【讨论】：

我已经尝试设置视频高度，但这会缩小视频，而帧保持相同的大小。我希望帧与视频一起缩小

【解决方案2】：

Bootstrap 提供了一些类，可让您将视频保存在其容器中并具有正确的尺寸。这些类是embed-responsive，然后是embed-responsive-16by9 或embed-responsive-4by3。见this。

【讨论】：