0

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?

bashaus
  • 1,614
  • 1
  • 17
  • 33
  • have a view to http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content/20777751#20777751 . Perhaps you could use this as a function and call it by $(document).ready(function(){resizeIframe();}); and $(window).bind('resize orientationchange', function () {resizeIframe();}); Good luck – ddlab Oct 13 '15 at 23:03
  • This does not address the issue that I'm having - thanks for your help anyway – bashaus Oct 14 '15 at 14:37
  • just a question for better understanding: are your iframe dimensions changing as expected but not the containing vids ? Or the iframe itself doesn't scale ? What I don't get is... in your function above you're giving both, witdth and height, the same value, which is "dimensions". Shouldn't it be calculated by aspect ratio ? What you currently get can only be a square, guess it isn't what you expect. – ddlab Oct 14 '15 at 22:34
  • It's the content inside the iframe which is not updating. The dimensions of the parent are being manipulated - but it seems that vine itself doesn't like updating on orientation change. – bashaus Oct 30 '15 at 13:25

0 Answers0