javascript - 流動的な幅のビデオで方向の変更時に iFrame がサイズを更新しない

Question

一連の Vine iFrame で使用するために、流動的な幅のビデオを Web サイトに実装しました。これはデスクトップではうまく機能しますが、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);
});

これを並べ替える方法についての手がかりはありますか？