响应式视频的 CSS 是如何工作的

Question

寻找在我的网站上制作响应式 youtube 视频的方法，我发现这段代码可以正常工作：

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

但是，我无法理解它是如何工作的。我知道通过使 iframe 类绝对定位并具有 100% 的宽度和高度，它会占用容器提供的所有空间。但是容器本身呢？那个 25px padding-top 有什么作用？那 67.5% 的填充底部从何而来？既然以百分比表示填充意味着容器的百分比，那么这个 css 如何在所有容器大小上都能正常工作？

我可以使用更适合我的视频的不同数字吗？如果是，怎么做？

谢谢。

Answer 1

• 视频包含 position:absolute 和 overflow:hidden - 会裁剪除视频以外的任何额外内容
• padding-top 用于保持视频搜索栏可见，无需为容器设置固定高度值（值取决于您使用的视频播放器）
• padding-bottom 为视频容器添加间距，并根据视频的纵横比计算得出。如果视频使用 16:9 宽高比，这意味着：

  16.....100%
      x
  9 ...... ?
  9 * 100 / 16 = 56,25%
  

视频容器高度是视频容器宽度的56.25%。根据您的宽高比和嵌入的播放器，您需要调整填充以适合您的视频。