css - iframe 视频 100% 宽度

Question

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

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

Answer 1

试试这个:

.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