Javascript 使iframe垂直响应

所以我得到了一个包含视频的简单iframe
它反应灵敏，但仅“水平”
要想弄清楚，只需看一下这个简单的片段：

这是HTML:

<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item visible-xs" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

如果尝试水平调整页面大小，iframe将正确调整自身大小
但是如果你试图垂直调整页面大小，它只会向上/向下滑动，而没有正确调整大小。。。

---

我怎样才能解决这个烦人的问题呢？

如果你还没有，试试

html，body{height:100%；}

already@gaynorvader谢谢你的建议，但我已经尝试过了，但它不起作用：（在本地文件上运行代码，效果良好。唯一的问题是iframe中的内容不一定是100%高度。这是你的意思吗？如果是，iframe目标是否与父页面位于同一域？如果不是，你可能会遇到目标位于不同域，但我允许CORS:）很酷，现在您只需要使用一些js来定位iframe中的css，因为我99.9%确定通过iframe加载的内容在所有情况下都会忽略其父级的css。

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
    padding-bottom: 75%;
}