如何巧妙地利用css让iframe嵌入视频/地图（固定比例自适应）
宽度随屏幕 100% 变宽时，高度也按比例（比如 16:9）自动变高。那么不需要任何 JavaScript，纯 CSS 就可以完美实现。
html
<div class="iframe-wrapper">
<iframe
src="//player.bilibili.com/player.html?aid=386733968"
allowfullscreen="allowfullscreen"
></iframe>
</div>
css
.iframe-wrapper {
width: 100%;
aspect-ratio: 16 / 9; /* 核心：让容器始终保持 16:9 的高宽比 */
}
.iframe-wrapper iframe {
border: 0;
width: 100%;
height: 100%; /* iframe 完美填满这个 16:9 的格子 */
}举个例子