Can You Make an iFrame Responsive?

Question

I want to embed a website in a WordPress page of another website.

the iframed website is a contact form processing page in asp, and it is not responsive.

Could I wrap this in a div tag that is responsive or can I make an iFrame responsive?

thanks.

Answer 1

Depends what you want the iframe to be responsive to: to changes of the containing block or to changes of content inside the iframe.

If you want the iframe to adapt to the size of the containing block (e.g. user resizes browser window), you might want to add relative dimensions using percentage values to the iframe element, e.g., by way of a stylesheet:

html,body {
    height:100%;
}

iframe {
  width:80%;
  height:80%;
}

For this to work, you also need the html and body set to 100% height, don't ask my why :-) but this magic just works.

Example: http://jsfiddle.net/4z2hn/

I'd like to add my personal opinion: Preferably, JavaScript should not be used to solve a layout issue. For that, use CSS instead. The power of the current CSS implementations allow for stylistic flexibility and provide design possibilities which where unavailable before. Only if all else fails, resort to a scripted solution.

Answer 2

Not sure what elements are on the contact form asp page.

You can try the method to resize via jquery. from How do you create auto resizing a iframe when you make your browser smaller?

$(window).resize(function() {
  $('IFRAME').width($(window).width());
});

Or use the other method.

Resizing an iframe's width on window resize

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

It depends on the contents inside the frame how well that resize actually works for you. But it is a start.

Answer 3

To resize and keep original proportions.

1. Use original height and width to calculate proportions
2. Get new width (that is % size with css)
3. Derive new height

X / newWidth = originHeight / originWidth
X = newWidth * (originHeight / originWidth )
X = New Height

See here: https://jsfiddle.net/koaab543/2/

function responseveIframe() {
  $('iframe').height(
    $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width()
  );
}

responseveIframe();

$(window).resize(function() {
  responseveIframe();
});

iframe {
  max-width: 98%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>