Question

我想适合嵌入页面中间（宽度为70％）的YouTube iframe，所以我要这样做：

.wrapper {
    margin: auto;
    width: 70%;
}

.wrapper iframe {   
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

问题是，视频周围出现黑条，以填补可用空间。如果改为使用填充（如this answer中的填充），则iframe只能水平放置，并且可能需要在垂直方向上滚动。知道会有所帮助吗？（旧版浏览器支持不是问题）

编辑：我知道我要播放的视频的长宽比。

Answer 1

您可以尝试使用flex css解决此问题。您可以根据需要对iframe使用静态高度宽度

.wrapper  {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper iframe{
width: 100px;
height: 100px;
}

Answer 2

如果iframe的宽高比过高（大约超过0.5，则出现黑条）。

即使调整了包装的大小，也可以使用此CSS保持固定的高度/宽度比：

.wrapper {
  width: 70%;
  padding-top: 35%; // 35/70 = 0.5, the ratio can be changed here
  margin: auto;
  position: relative;
}
.wrapper iframe {
  width: 100%;
  position: absolute;
  height: 100%;
  transform: translate(0, -100%);
}

装上没有黑条的YouTube iframe（水平和垂直）

2 个答案: