Can You Make an iFrame Responsive?

4 comments

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.

   Log in to Reply

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.

   Log in to Reply

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>

   Log in to Reply

4. You cannot make iframe content responsive if it is not your page. You can add iframe style

   iframe {
     width: 100%;
   }
   

   to make iframe wrapper responsive.
   But content in it – will be the same as it was – (as I said – unless it is your page also)

   Log in to Reply