set the iframe height automatically

Question

I need to embed an HTML page inside a frame, and am using the following code:

<iframe src="http://www.google.com" style="width: 90%; height: 300px"
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0"
    vspace="0" hspace="0">

I am trying to make the height set to auto so that the frame auto resizes to the page length without having to hardcode the height as I am doing here. I tried height:auto and height:inherit but it did not work.

Have you tried setting `height:100%` if the iframe is in the body that should make it fill the body? — Xander, Mar 06 '13 at 19:15

score 22 · Accepted Answer · edited Apr 05 '18 at 08:41

22

Try this coding

<div>
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%;
        width: 100%; position: absolute;"></iframe>
</div>

edited Apr 05 '18 at 08:41

Community

1
1

answered Nov 12 '13 at 12:10

Golda

3,823
10
34
67

Note: I've found using the style height and width is glitchy. The height and width attributes are the important thing here that seems to work consistently. Is there a reason you used both? – Andrew Feb 03 '17 at 16:13
2

% on iframe's height/width is invalid HTML5 as per spec (it was valid before though) – Jan 07 '18 at 14:44

score 11 · Answer 2 · answered Nov 08 '18 at 16:21

11

Solomon's answer about bootstrap inspired me to add the CSS the bootstrap solution uses, which works really well for me.

.iframe-embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.iframe-embed-wrapper {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.iframe-embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
<div class="iframe-embed-wrapper iframe-embed-responsive-16by9">
    <iframe class="iframe-embed" src="vid.mp4"></iframe>
</div>

answered Nov 08 '18 at 16:21

user323774

400
3
9

2

Fantastic! I had to get rid of the `height: 0;` but aside from that it works flawlessly, and this is with an angular page in an iframe hosted in a resizable modal popup in old gwt app! – Roger Mar 04 '20 at 06:45
1

Works on current Chrome Sep 2020. Thanks. – Tom Sep 28 '20 at 08:07

score 4 · Answer 3 · answered May 07 '18 at 22:10

4

If you a framework like Bootstrap you can make any iframe video responsive by using this snippet:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="vid.mp4" allowfullscreen></iframe>
</div>

answered May 07 '18 at 22:10

Solomon Antoine

554
1
7
14

score 2 · Answer 4 · edited Mar 20 '21 at 19:50

2

If the sites are on separate domains, the calling page can't access the height of the iframe due to cross-browser domain restrictions. If you have access to both sites, you may be able to use the document domain hack. Then anroesti's links should help.

edited Mar 20 '21 at 19:50

MattAllegro

6,455
5
45
52

answered Mar 06 '13 at 21:47

jcaponi

389
2
10

1

This library on GitHub solves the cross-domain problem, along with making sure the iFrame stays sized to the content when things change. https://github.com/davidjbradshaw/iframe-resizer – David Bradshaw Apr 10 '14 at 14:40

set the iframe height automatically

4 Answers4

Linked