javascript - iFrame 不使用流体宽度视频更新方向变化的大小

Question

我已经在一个网站上实现了与一堆 Vine iFrame 一起使用的流体宽度视频。这在桌面上运行良好，但在 iPad 上更改方向时 iFrame 的内容不会按比例缩小。

HTML：

<div class="videoContainer">
    <iframe src="https://vine.co/v/epPtxPr9uuj/card"></iframe>
</div>

CSS：

.videoContainer {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    display: block;
}

.videoContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

我试图创建一个 JavaScript 函数来强制包含 iFrame 的宽度和高度，但据我了解，这不会做任何事情，因为触发器必须发生在 iFrame 内。

JavaScript：

function resizeVine() {
    $('.videoContainer iframe').each(function () {
        var $this = $(this),
            dimensions = $this.parent().width();

        $this
            .width(dimensions)
            .height(dimensions)
            .attr({
                width: dimensions,
                height: dimensions
            });
    })
}

$(window).bind('resize orientationchange', function () {
    window.requestAnimationFrame(resizeVine);
});

关于如何排序的任何线索？