Containing iframe content to iframe size on mobile

Question

I'm having problems with iframes on mobile safari. I have the following incredibly simple code styling my iframe:

#iframe {
    width: 400px;
    height: 250px;
    border: none;
    background: #eee;
    z-index: 1;
}

https://jsfiddle.net/canyondellomo/1be4zf86/2/.

On desktop, the image of the dog is contained within the dimensions of the iframe. However, when the page is loaded on mobile, the iframe content totally disregards the size of the iframe, and expands to its full size.

Could you help me with this?

Thanks so much

Have a look here: http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari — Kevin M, Jun 15 '15 at 15:09

score 0 · Answer 1 · answered Jun 15 '15 at 14:04

0

It sounds like the image is bigger than the iframe when scaled down to mobile.

Try setting this style in the image's class:

max-width:100%;

(or whatever width you need it to be)

This might make it scale better. If this doesn't work, play around with setting the size using percentages. Percentages are based on how much space there is in the container, not on the size of the image itself

answered Jun 15 '15 at 14:04

Snappawapa

1,697
3
20
42

I've played around with this before as well, still unfortunately fails to help. Thanks for answering though – LimitedBacon Jun 15 '15 at 14:15
Did you try setting a width of the iframe? explicitly setting it to `100%` might help – Snappawapa Jun 15 '15 at 14:18

Containing iframe content to iframe size on mobile

1 Answers1