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%。根据您的宽高比和您要播放的播放器，您需要调整填充以适合您的视频。

css如何响应视频工作

1 个答案: