Question

我想让YouTube视频以100％的宽度和高度显示。似乎iframe本身正在做我想要的，但是，一旦播放视频，它只有100％宽度，最高可达1100px。

我尝试过在网上搜索但无法找到解决方案，让视频本身的宽度与视频海报和iframe宽度相同。

Answer 1

您的视频已经有100％的宽度。当我右键单击视频的左侧或右侧时，会出现YouTube视频的上下文菜单。 Check this screenshot

我认为问题出在你的视频上。您的视频无法正确显示正确的宽度和高度。

Answer 2

试试这个：

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="container">
<iframe src="https://www.youtube.com/embed/ZLyS2wHiZM8" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

Reference article

Answer 3

我认为你的视频比例是16：9。也许你可以试试这个：

.container {
  width: 100vw;
  height: 56.25vw;
}
.video {
  width: 100%;
  height: 100%;
}

这是一个示例link

iframe视频100％宽度

3 个答案: