Archived topic
embedding responsive iframe, extra space
4 replies · Started by Eva on July 17, 2018
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
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:
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!
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
Thank you!!
