[Resolved] embedding responsive iframe, extra space

[Eva]

Hi!
I have embedded a responsive iframe with a catalog. No I would like to add some extra space to the top and the bottom. Would that be possible? Can be seen here: https://www.mariandriessen.nl/oeuvrecatalogus/
Another problem is that the producer of the content in the iframe says it’s difficult/impossible to make magnifying the images work in an embedded environment. You have to click on an item in the iframe to see this possibility. I hope I have explained this properly… 🙂
Thanks for helping out!
Eva

[David]

Hi there,

there is very little control over the styling of the iframe contents.
You can make the iframe container larger by adjusting this CSS and increasing the padding or by setting a minimum height:

.iframe {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}

To make a lightbox break out of the iframe would require some custom coding on both the content providers site and your site.

This question came up on StackOverflow:

http://stackoverflow.com/a/8855410/1055987

[Eva]

Thank you for your fast reply, David!

I have changed the padding-bottom to 60% and it looks better now, at least on a desktop. I noticed changing the padding-top doesn’t make any difference, but it’s quite ok now. I have used this CSS now:
.iframe {
position: relative;
padding-bottom: 60%;
padding-top: 25px;
height: 0;
}
.iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Is that correct or should I leave the second part out?

I will pass the StackOverflow link on to the producer of the content, although I think we can now live with the fact that the images can’t be enlarged 🙂

Thaks again for the great support!

[David]

Hi Eva,

that looks correct, i would leave it as is.
Yes it will require the content producers effort to make it work.

Glad i could be of help

[Eva]

Thank you!!

[Author]

Posts