html - 如何让我的嵌入式 YouTube iframe 扩展？

Question

我的网站看起来很棒...直到我更改分辨率或浏览器，突然间 YouTube 视频不成比例。其他一切都很好地扩展，我根本无法让它们扩展。我尝试将它们设置为百分比，但它们只是缩放到最近的容器(视频)，它也拒绝按百分比缩放高度。

<aside id="video">
<iframe src="https://www.youtube.com/embed/-i3mX0YRrjM" width="320" height="190"></iframe>
</aside>

#video {
margin: auto;
width:320px;
height:190px;
box-shadow: 15px 15px 10px rgba(0,0,0,0.8);
}

Answer 1

<div id="container">
<aside id="video">
<iframe src="https://www.youtube.com/embed/-i3mX0YRrjM" width="320" height="190"></iframe>
</aside>
</div>

#container {
margin:auto;
width:50%;
}

#video {
margin:auto;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
box-shadow: 15px 15px 10px rgba(0,0,0,0.8);
}
#video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

只需调整 CSS 中的#container 宽度即可调整大小。