iFrame不会使用流体宽度视频更新方向更改的大小

Question

我在网站上实现了fluid width videos，用于一堆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%;
}

我尝试创建一个强制包含iFrame的宽度和高度的JavaScript函数，但据我所知，这不会做任何事情，因为触发器必须在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);
});

有关如何对此进行排序的任何线索？