Make an Iframe responsive in height

Question

I have a type of "store-locator" on https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ Due to demand, I want to put this in an iFrame so other websites can display this form on their page. Giving them the possibility to easily add my "store-locator" to their website.

At the moment I have:

<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

Which works, as long as the screen doesn't get to small. However, the form is responsive, and if the screen becomes very small, the row with addresses goes underneath the big map. Making the complete form a lot higher then on normal view. (normally it would be 734px high, in responsive design it is 1388px high) This would mean that I need an iFrame that stretches just as the content stretches. (if that is at all possible)

If that is not possible, would it be possible to put something like this in the style? (it doesn't work if I use it in my example, but maybe I'm doing it wrong?)

Style="@media (max-width:675px){iframe{height:1388px}}"

The goal of this piece of CSS would be to change the height of the iFrame when the width goes below 675px.

Another solution is welcome, as long as it works :). Because I'm displaying the code on my website, so other can just copy-paste it, it would be beneficial if the code is kept reasonably simple.

It seems 1 person has removed their comment, even though the solution was pretty good. Essentially, this was the code that I ended up with thanks to him:

<style>#iframe {width:100%;height:740px;border:none;overflow:hidden;}
@media (max-width:675px){#iframe{height:1588px;}}
</style>
<iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ 
"frameborder="0" id="iframe" name="De Detailer-Zoeker"></iframe>

The only problem is that this only responds to the size of the browser-screen, and not the container in which the iFrame is placed. This means that the iFrame will behave differently on a website with sidebars, then one without sidebars.

the @media rule should be in the stylesheet (CSS file or in between ` — G-Cyrillus, Jul 13 '17 at 07:52
I can't put the CSS stylesheet in the tag for the iFrame. And if they only copy the code for the iFrame, they don't copy my own CSS sheet. So they wouldn't have the same styling. — Vinnie Van Rooij, Jul 13 '17 at 14:40

score 1 · Answer 1 · answered Jul 13 '17 at 08:03

You have a couple ways of dealing with this issue.

1. Breakpoints

Add a breakpoint the moment the list of address goes underneath the map. You can use CSS Media Queries to acheive this.

@media (max-width: 675px) {
    iframe {
        height: 1388px;
    }
}

2. Javascript

Use Javascript to read the width of the screen and then change the height of the iframe accordingly.

Adjust width height of iframe to fit with content in it

Make iframe automatically adjust height according to the contents without using scrollbar?

However the Javascript method has drawbacks.

I think I would prefer to use CSS, I get the feeling this is safer and easier (??). The biggest problem that it needs to be inline, otherwise the person who copy/paste's the code won't have any benefit from the CSS code I have in my own style sheet. — Vinnie Van Rooij, Jul 13 '17 at 14:45

Rubenxfd · Answer 2 · 2017-07-14T08:19:21.153

0

You are almost there, you just need to adjust your media query a bit.

You say you want other websites to include your iframe without having to edit their CSS file. You can do that as followed:

Tell the client to place the following CSS in their <head> section.

<style>
  @media screen and (max-width:675px){
    #iframe{
      min-height:1388px;
      overflow-y: scroll !important;
    }
  }
</style>

Then, tell them to put the iframe between the <body> tags where they want to display the iframe.

<iframe id="iframe" name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

Look at this working fiddle:

Hope this helped!

edited Jul 14 '17 at 08:19

answered Jul 13 '17 at 07:54

Rubenxfd

434
1
5
19

Thank you. I think it works good enough, but the point is that anybody need to be able to use this on their website. So I need a block with code that somebody can copy/paste into their own website. If I put this into my own CSS file, it won't have any effect on the code on somebody else's website. – Vinnie Van Rooij Jul 13 '17 at 14:43
Just put it between – Rubenxfd Jul 13 '17 at 17:16
Edited my post so it will work correctly for other sites! – Rubenxfd Jul 13 '17 at 17:21

score 0 · Answer 3 · answered Jul 13 '17 at 07:55

0

It works fine when you define all CSS in an external style sheet.

iframe {
  width: 100%;
  height: 734px;
  border: none;
  overflow: hidden;
}

@media (max-width:675px) {
  iframe {
    height: 1388px
  }
}

<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>

answered Jul 13 '17 at 07:55

Gerard

15,418
5
30
52

I understand, but it needs to be possible for anybody to copy/paste onto their own website. And this approach would require them to add this to their own style sheet, on top of copying the code to their site. – Vinnie Van Rooij Jul 13 '17 at 14:46
In that case, put it between in your HTML file. – Gerard Jul 13 '17 at 14:49
I see GCyrilius did just that after you posted this. – Vinnie Van Rooij Jul 13 '17 at 15:01

score 0 · Answer 4 · answered Jul 13 '17 at 07:55

0

code for responsive iframe

<style type="text/css">
    iframe {
        width:100%;
        height:734px;
        border:none;
        overflow:hidden;
    }
    @media screen and (max-width:1166px) {
        iframe {
            width:100%;
            height:734px;
        }

    }
    @media screen and (max-width:1024px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:980px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:767px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:599px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:479px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:374px) {
        iframe {
            width:100%;
            height:1388px;
        }

    }
    </style>
    <iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>

answered Jul 13 '17 at 07:55

Shital Marakana

2,817
1
9
12

Thank you, that works great on my own site. But this would be very difficult for somebody else topy/paste onto their own website. – Vinnie Van Rooij Jul 13 '17 at 14:41
it is easy. remove inline style of iframe and set css of iframe in other website. – Shital Marakana Jul 14 '17 at 06:27
I'm afraid I don't fully understand what you mean with that. – Vinnie Van Rooij Jul 14 '17 at 06:28
just remove inline style style="width:100%;height:734px;border:none;overflow:hidden;" in iframe code. and copy above css code and past in to your css file – Shital Marakana Jul 14 '17 at 06:32
And how would that work if somebody put this code on their website? They don't have my CSS file on their website. – Vinnie Van Rooij Jul 14 '17 at 06:45
simple, just above css and iframe code copy and past in their website. – Shital Marakana Jul 14 '17 at 06:49

Make an Iframe responsive in height

4 Answers4