How to Scale iFrame Content in IE, Chrome, Firefox, and Safari
on November 5, 2013
Scaling (or zooming) the content of an iFrame can be useful when you are trying to display an object in an area that does not match its original size. The below code scales an iFrame that is 1000 pixels wide down to 710px.
The values for the original dimensions are input after the #scaled-frame id selector and the scaled values are input after the #wrapper id selector. Just multiply the original dimensions by the zoom ration you want to use. For example, if you want to scale to 71% as shown in the example below, 1000px x 2000px becomes 710px x 1420px.
The zoom factor is input for the zoom, -moz-transform, -o-transform, and -webkit-transform properties.
Unless the @media screen and (-webkit-min-device-pixel-ratio:0) is defined, the iFrame will be scaled twice in Google. Leave this value set to 1.
To use the below code, simply copy and paste it into your html and update src="https://your-url.com/" to whatever content you’d like to display.
<style>
#wrapper { width: 710px; height: 1420px; padding: 0; overflow: hidden; }
#scaled-frame { width: 1000px; height: 2000px; border: 0px; }
#scaled-frame {
zoom: 0.71;
-moz-transform: scale(0.71);
-moz-transform-origin: 0 0;
-o-transform: scale(0.71);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.71);
-webkit-transform-origin: 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame { zoom: 1; }
}
</style>
<div id="wrapper"><iframe id="scaled-frame" src="http://your-url.com/"></iframe></div>
Hi. how would you use this to scale up rather than scale down?
Well Done !! this works perfectly
Thank you! I am an HTML/CSS newbie working in muse and needed to display a non responsive website within a tablet layout – tried a lot of other suggestions but this worked.
perfect !!! thank you
Brilliant! The only version of this code I’ve found online that actually works! And it works both ways
Elegant and easy to understand solution to a problem that I’d spent days trying to fix. Thanks for sharing this!
Brilliant – at least to this intermediate web guy. Thank you so much for posting.
Thanks Tom, glad you found it useful!
Works great thank you so much!
Excellent work, solved my problem involving an iFrame in a cordova/ios popup dialog
Thanks
Great, you’re welcome!
How do I set margins smaller? It is working…but too much white space on left.
@Amy, try adjusting the width or centering the div.
Excellent many thanks
Thanks you so much ! <3
ABSOLUTLEY WONDERFUL!!! THANKS ALOT!!
Great. Thanks for sharing. But if I wanted to iframe only a portion of the targeted web, how can I do it? The code above allow iframe a resized of a targeted website and it shows the whole “re-sized” web. How can I show a “re-sized” portion of a targeted website?
Very nice, works great… tried many solutions and this one is best. Thank for posting!
My situation here is I need to load image of .pdf inside a frame.
Tried many ways. But this helped me atleast to 50%.
Thanks a lot
This is really really good
Well done
This is awesome, searched for it a long time and works perfect!
Thank you, merci, spasiba.
🙂
You saved my day, thank you! I spent hours on trying to find a fix for this. I include different slideshows in an iframe, based on language on the site, but the content got blurry. I used your code, but with scale 1 instead of 0.71 as in your example, and it worked out perfectly.
Wonderful piece of code, the only one that actually worked for me in resizing webcam streams to a multiple cameras dashboard, thanks!
Hello. This did’nt work for me as i am using a PDF as a source.
I could manage to zoom in/out using your CSS but instead of leaving the iFrame where it is and resizing JUST the element, everything was resized…
This fixed an issue I have been trying to solve for weeks. Thanks!