html - 在没有黑条的情况下安装 YouTube iframe(水平和垂直)

Question

我想在页面中间嵌入一个 YouTube iframe(70% 宽度)，所以我这样做了:

.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;
}