Multiple Iframes on one page scaling issue

Question

I'm trying to put two responsive iframes on top of each other on one page. Unfortunately the content of the iframe is resizing right but height of the iframe boarder doesn't change so there is an increasing cap between the two iframes when you re-size the window. I hope you can see what I mean. What can I do to avoid that gap?

function adjustIframes() {
  $('iframe').each(function() {
    var
      $this = $(this),
      proportion = $this.data('proportion'),
      w = $this.attr('width'),
      actual_w = $this.width();

    if (!proportion) {
      proportion = $this.attr('height') / w;
      $this.data('proportion', proportion);
    }

    if (actual_w != w) {
      $this.css('height', Math.round(actual_w * proportion) + 'px');
    }
  });
}
$(window).on('resize load', adjustIframes);

iframe {
  margin: 5px;
}

<center>T E S T T O P</center>
<iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Melli/indexRev.html" width="100%"></iframe>
<iframe frameborder="0" height="600" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html" width="100%"></iframe>
<center>T E S T B O T T O M</center>

score 0 · Answer 1 · edited May 23 '17 at 11:59

You need to add wrapper elements to make iframes responsive (at least without a javascript hack).

Here is a working example without the javascript (don't need it):

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .wrap {
      position: relative;
      padding-bottom: 52.68%;
      padding-top: 30px;
      height: 0;
      overflow: auto;
      -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
      border: solid black 1px;

    }

    <center>T E S T T O P</center>
    <div class="wrap">
      <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Melli/indexRev.html"></iframe>
    </div>
    <div class="wrap">
      <iframe frameborder="0" src="http://danielsalaw.de/Bilder/Kocha/indexRev.html"></iframe>
    </div>
    <center>T E S T B O T T O M</center>

The only catch here is that you need to know the aspect ratio you want for the iframe. Basically here i just took the heigh and divided by the width of you original iframe (=52.68%) and then used that in the padding hack.

Basically taken from this answer on making iframes responsive: https://stackoverflow.com/a/27836998/900271

score -1 · Answer 2 · answered Feb 24 '16 at 12:22

IFrame heights can be a pain because the content inside the iframe is laid out independently of the parent so it you can't really style it with CSS and get the height to adjust (as Oke Henrik Skogstream said).

If you don't know the height of the iframe content then you'll have to hack it with javascript from inside the iframe.

See here for a simple JavaScript hack: https://github.com/jcharlesworthuk/reactive.iframes

Multiple Iframes on one page scaling issue

2 Answers2