在响应式布局中保持视频宽高比答案

【问题标题】：Maintaining a videos aspect ratio in a responsive layout在响应式布局中保持视频宽高比
【发布时间】：2015-10-06 13:09:13
【问题描述】：

我正在尝试在响应式布局中保持视频纵横比，以防止在布局更改大小时出现黑边。到目前为止，我已经设置了一些媒体查询，但是在重新调整大小时，仍然有一些视频有黑边。

您可以在http://smedia.lv/（SHOWREEL 视频）这里查看布局和视频。

视频是通过 iframe 从 Vimeo 嵌入的，其宽度和高度均为 100%。视频容器宽度取决于屏幕大小，也以% 定义，高度是固定值。

如何保持视频的纵横比，使其没有黑边？

【问题讨论】：

fitvidsjs.com
这并没有按计划进行，它只是将视频容器变成了正方形。

标签： html css video

【解决方案1】：

你想要的是fluid width video。

向您的容器 (.video) 添加一些样式，iframe 将完成此操作。

.video {
  height: 410px;
  width: 964.71px;
  margin: 0 auto;
}
iframe {
  width: 100%;
  height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
@media(max-width: 1046px) {
  .video {
    position: relative;
    /* 40:17 aspect ratio */
    padding-bottom: 42.5%;
    height: 0;
    width: auto;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}

查看下面的示例。

注意：

您可以使用媒体查询设置断点，在该断点处视频的大小不会超过 964.71x410。
您需要更新padding-bottom、.video width 和媒体查询，以在视频发生变化时反映正确的视频纵横比。

.video {
  height: 410px;
  width: 964.71px;
  margin: 0 auto;
}
iframe {
  width: 100%;
  height: 100%;
}
@media(max-width: 1046px) {
  .video {
    position: relative;
    /* 40:17 aspect ratio */
    padding-bottom: 42.5%;
    height: 0;
    width: auto;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}

<div class="video">
  <iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

【讨论】：

此解决方案也不起作用。它只是将视频扩展到整个页面。
@TacoCat 我已更新答案以包含媒体查询。这应该有助于您执行我所理解的 max-height 的 410px 要求。