How to set iframe size dynamically

Question

How should I set the dimensions of an iframe dynamically, so the size is flexible for different viewport sizes?

For example:

<iframe src="html_intro.asp" width="100%" height="300">
  <p>Hi SOF</p>
</iframe>

In this case the height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window.

At any size, the iframe aspect ratio should be the same. How can this be done?

score 38 · Accepted Answer · edited May 03 '13 at 19:54

38

If you use jquery, it can be done by using $(window).height();

<iframe src="html_intro.asp" width="100%" class="myIframe">
<p>Hi SOF</p>
</iframe>

<script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()+'px');
</script>

edited May 03 '13 at 19:54

pjmorse

9,204
9
54
124

answered Sep 06 '11 at 09:48

Naveen Velaga

648
1
11
22

1

check this out , it has been asked earlier http://stackoverflow.com/q/838137/912019 – Naveen Velaga Sep 06 '11 at 09:57
6

Actually, instead of width="100%" you should use style="width: 100%", since according to the HTML reference, the attribute width for iframe accepts only values in pixels http://w3c.github.io/html-reference/iframe.html – Zé Carlos Aug 12 '15 at 15:26

score 14 · Answer 2 · answered Sep 06 '11 at 09:42

14

Not quite sure what the 300 is supposed to mean? Miss typo? However for iframes it would be best to use CSS :) - Ive found befor when importing youtube videos that it ignores inline things.

<style>
    #myFrame { width:100%; height:100%; }
</style>

<iframe src="html_intro.asp" id="myFrame">
<p>Hi SOF</p>
</iframe>

answered Sep 06 '11 at 09:42

Graeme Leighfield

2,825
3
23
38

1

`height="300"` gives the `iframe` a width of 300px. – Peeja Jul 03 '15 at 19:10

Lamecarlate · Answer 3 · 2017-02-01T13:24:03.527

3

~~Have you tried height="100%" in the definition of your iframe ? It seems to do what you seek, if you add height:100% in the css for "body" (if you do not, 100% will be "100% of your content").~~

EDIT: do not do this. The height attribute (as well as the width one) must have an integer as value, not a string.

edited Feb 01 '17 at 13:24

answered Sep 06 '11 at 09:53

Lamecarlate

101
9

Not sure why nobody upvoted this answer, but it's quite correct. – Oct 23 '15 at 18:35
In fact, as I read again my answer, it's wrong. The value of `height` attribute must be an integer. I'll edit that. The solution of Graeme Leighfield is the correct one. – Lamecarlate Feb 01 '17 at 13:22
Not quite true. The values can also be in percentages. The reason 100% may not work at first glance is that body and html elements may not be as tall as you expect them to be as 100% has the same semantic as in CSS. See this for example: https://jsfiddle.net/ux5d06qm/ So the recommendation to set it to 100% height and also set the height on body and html is correct. – Feb 02 '17 at 08:23
2

It may *work* but it is invalid. "The attributes, if specified, must have values that are valid non-negative integers." Source: https://www.w3.org/TR/html5/embedded-content-0.html#attr-dim-height – Lamecarlate Feb 03 '17 at 22:22
According to spec, yes, that seems to be the case, although using percentages seems to be implemented quite widely. Alternatively, height and width of an iframe can be set using CSS without touching height and width attributes, as far as I can tell. – Feb 04 '17 at 09:18

score 2 · Answer 4 · answered Feb 22 '18 at 19:14

I've found this to work the best across all browsers and devices (PC, tables & mobile).

<script type="text/javascript">
                      function iframeLoaded() {
                          var iFrameID = document.getElementById('idIframe');
                          if(iFrameID) {
                                // here you can make the height, I delete it first, then I make it again
                                iFrameID.height = "";
                                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
                          }   
                      }
                    </script> 


<iframe id="idIframe" onload="iframeLoaded()" frameborder="0" src="yourpage.php" height="100%" width="100%" scrolling="no"></iframe>

score 1 · Answer 5 · answered May 30 '21 at 19:01

Latest css rules will allow you to do use viewport directly, like so:

<iframe src="html_intro.asp" width="100vw" height="50vh">
  <p>Hi SOF</p>
</iframe>

I personally like to adjust for iframes by manipulating their parent containers:

<div class='iframe-parent'>
  <iframe src="html_intro.asp">
    <p>Hi SOF</p>
  </iframe>
</div>

Now the css:

.iframe-parent{
  width: 100vw;
  height: 50vh;
}

/* Expand to the entire container */
iframe{
  width: 100%;
  height: 100%;
}

This works beautifully. Is there any risk with backwardscompatability? — Viggos, Sep 06 '22 at 08:22

score -4 · Answer 6 · answered Dec 03 '20 at 08:40

The height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window

<!DOCTYPE html>
    <html>
    <body>
    
    <center><h2>Heading</h2></center>
    <center><p>Paragraph</p></center>
    
    <iframe src="url" height="600" width="1350" title="Enter Here"></iframe>
    
    </body>
    </html>

How to set iframe size dynamically

6 Answers6

Linked