How to make an iframe responsive and have it take up only as much height as it needs in its parent?

HTML & CSS
1

I have a page with a 3rd party iframe, on another domain. I can apply styles to the iframe itself:

<iframe style="border: 0; height: 200px; width: 600px;" src="//demo2.piwik.org/index.php?module=CoreAdminHome&amp;action=optOut&amp;language=en"></iframe>

As well as to the body of the iframe (via a plugin in my backend).

The problem that I have is that the iframe can be different heights, depending on what content it must display.

What I’d like to know - is it possible to have the iframe take up 100% of the available width (so that it’s responsive) and just as much height as it needs to display its contents? As things stand I have to set the height to the maximum it can be (when displaying a long message). If it displays a short message, then there is an unsightly gap between the iframe and the nearest contents below it.

Here’s a small demo to demonstrate the problem. You can change the contents of the iframe by turning on/off the “Do Not Track” settings of your browser. (See here: https://allaboutdnt.com/)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>I'm rubbish at CSS</title>
  </head>

  <body>
    <p>Some text</p>
    <iframe style="border: 0; height: 200px; width: 600px;" src="https://demo2.piwik.org/index.php?module=CoreAdminHome&amp;action=optOut&amp;language=en"></iframe>
    <p>Some more text</p>
  </body>
</html>

Regardless of what the contents of the iframe are, I’d like it to occupy 100% width and just enough height to display its contents, without a large gap to the proceeding <p> tag.

Grateful for any help.

2

Hello Pullo,
Yes it’s possible, there is a little trick that sets a bottom padding on the iframe parent div. That padding is based on the aspect ratio of the iframe and it controls the scaling.

Here is a recent post with an example and a link to the method.

That was using flexbox but the same concept can be set up in a fluid width block div.

Have a look at the code example in that post and I’ll work on merging that concept into your example.

3

Hmm, I don’t think that method I mentioned will work in this case. Doesn’t look like an aspect ratio can be determined on that iframe.

If you can access the body element in that iframe and add styles to it that might be the way to go here.

As it is now, when I remove your inline styles from the iframe I get a fixed width/height with what looks like overflow:auto applied to it.

327×267 19.6 KB

Here is a shot with inspector on the iframe <body> with it’s fluid height of the actual content.
And as you say that height could change, so there won’t be any scaling of the iframe in this situation.

316×599 37.4 KB

4

Hi Ray,

Thank you for the in-depth reply. I tried following the tutorial you linked to (in the second post) but couldn’t get it to work at all, so thanks for the sanity check, too :slight_smile:

I can certainly do this. Could you point me in the direction of which styles I might need to apply to the iframe body? I can set a height in pixels or % but that doesn’t really help (as far as I can see).

5

I did something similar about 7 years ago and have a demo here.

http://www.pmob.co.uk/temp/new-parent-iframe.htm

You have to talk between the iframe and parent. (Can’t remember much else about it :))

6

Thanks, Paul. Nice demo.

So it seems that a pure CSS solution isn’t possible?

7

No, not to react to the height of the content in the iframe as that is unknown to the parent unless you talk between the two.

Most responsive iframe demos refer to maintaining an aspect ratio which is a different concept to resizing to fit content.

1 Like
8

@James_Hibbard
Is it absolutely necessary to use an iFrame and not just a div?

  <h2> Just a Plain Old Div </h2>
  <div class="w88 mga bd1 p42 bge fg3">
    <?= file_get_contents('https://supiet.tk/mt_rand.php'); ?> 
  </div>

Online Demo

The number of lines displayed is random from 0…42.

Refresh the page to get a new set of lines.

9

Hey John,

I tried

<?= file_get_contents('https://hibbard.eu/analytics/index.php?module=CoreAdminHome&action=optOut&idsite=2&language=en'); ?>

but nothing was included in the page - it failed silently.

The page whose contents I’m trying to include exists (as you can verify), so is it possible that my shared hosting blocks file_get_contents (and if so, how can I test that)?

10

Try this without the http://

https://www.johns-jokes.com/downloads/sp-i/jb-url-test/?

11

So:

<?= file_get_contents('//hibbard.eu/analytics/index.php?module=CoreAdminHome&action=optOut&idsite=2&language=en'); ?>

?

12

Whoops, I meant to paste your URL into the link provided and check the HTML, https boxes, etc.

The URL is shown to be moved permanently.

Looks like raising a support ticket to your service provider.

13

The 301 is presumably a redirect from HTTP → HTTPS. Can you try the same URL using HTTPS.

Or is that showing as moved permanently, too?

14

There are problems with all the provided links.

Each URL has a link and this page reckons something needs setting.

https://www.hibbard.eu/analytics/index.php?module=coreadminhome&action=optout&idsite=2&language=en'

An error occurred
The plugin coreadminhome is not enabled. You can activate the plugin on Settings > Plugins page in Matomo.

Go Back | Go to Matomo

Matomo.org homepage
Matomo Frequently Asked Questions
Matomo Documentation
Matomo Forums
Professional help for Matomo

1 Like
15

I use this at work and it does amazingly - even if you change pages in the iframe / click within it.

Just thought I’d throw this in. It’s very very simple to use.

2 Likes
16

Ok, thanks for trying, John! Appreciate your time.

1 Like
17

Thanks, Ryan. I’ll check it out now.

18

I believe that also uses the postmessage method mentioned in my example but obviously has more features added :slight_smile:

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.