iFrame not updating size on orientation change with fluid width videos

Question

I've implemented fluid width videos on a website for use with a bunch of Vine iFrames. This works well on desktop, but on iPad when changing orientation the contents of the iFrame doesn't scale down.

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%;
}

I attempted to create a JavaScript function which forces a width and a height on the containing iFrame, but from my understanding this won't do anything because the trigger has to happen inside the 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);
});

Any clues about how to sort this?