iFrame - Small, it's beautiful

For those who know me, you know that anglicisms are not my cup of tea, but here, I could not find a better title to present this trick that allowed me to achieve the result I wanted.

The needs

My need was simple, I wanted to display a reduced size of an iFrame by reducing, in fact, the content.

Basically I had a 728x90 iFrame and I wanted to reduce it by 50%.

Of course, you will have understood the need I had by analyzing these dimensions :-)

The implementation

And, while searching on the Net, I found the ultimate weapon to succeed in doing what I wanted.

It's simple, stupid, effective, basically a normal solution when you know the trick.

So I have my basic structure like :

<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;"></iframe>

I think we need to reduce the dimensions, so we switch to the zoom, but in the end to work on all browsers we need many more things, like transformations:

<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;-ms-zoom: 0.5;-moz-transform: scale(0.5);-moz-transform-origin: 0 0;-o-transform: scale(0.5);-o-transform-origin: 0 0;-webkit-transform: scale(0.5);-webkit-transform-origin: 0 0;"></iframe>

The result is there, the display is reduced by 50% (0.5) but the location reserved during the display remains the same, which is very ugly.

So you have to find a way around it, which is very often the case in our business.

In this case, it is quite simple, just include the reduced element in an element of the right size at the beginning.

Here, we make a reduction of 50% or 364px in width and 45 px in height.

which gives us in the end :

<div style="overflow:hidden;width:364px;height:45px;display:block">
<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;-ms-zoom: 0.5;-moz-transform: scale(0.5);-moz-transform-origin: 0 0;-o-transform: scale(0.5);-o-transform-origin: 0 0;-webkit-transform: scale(0.5);-webkit-transform-origin: 0 0;"></iframe>
</div>

I take out the css of the code, we have on the div :

overflow:hidden;
width:364px;
height:45px;
display:block

and on the iframe :

border:none;
-ms-zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;

You will have spotted theoverflow on the content of the main div. The small detail that makes the difference for the display quality, since it allows to hide everything that goes beyond the frame of the DIV and therefore avoids display problems if the internal element is not reduced right away or has a bug.

display:block is there to force the line break of the element, you can rename it, if you want your display to be in the continuation of the previous code in the page.

Conclusion

I know the trick, is not a crazy revolutionary thing, but personally, it is these little tricks that allow me to improve and integrate design ideas for new projects.