Javascript 保持纵横比的响应Iframe

我对编码和社区还不熟悉，我正在尝试响应性地嵌入YouTube iFrame。到目前为止，我所做的只是将原始宽度值替换为100%

.videoWrapper{
位置：相对位置；
垫底：56.25%；
保证金：自动；
身高：0；
}
.videoWrapper-iframe{
背景色：#F2F2；
位置：绝对位置；
最大宽度：100%；
最大高度：315像素；
宽度：95%；
身高：95%；
左：0；
右：0；
保证金：自动；
}

---

这应该可以帮助您开始

参考：引导

.responsive{
位置：相对位置；
显示：块；
身高：0；
填充：0；
溢出：隐藏；
}
.响应iframe{
位置：绝对位置；
排名：0；
左：0；
底部：0；
身高：100%；
宽度：100%；
边界：0；
}
.视频{
填充底部：56.25%；/*或75%，具体取决于视频类型*/
}

您可以尝试将

padding top

添加到视频包装器中<代码>填充顶部：56.25%导致16:9的纵横比。@Ihazkode所以我应该在iframe周围创建一个div，并将填充顶部添加到其中。我说得对吗？