Auto zoom iframe content

This demo works for HTTP and HTTPS. You are on HTTPS right now Please click here to get to the HTTP version.

This demo shows the"Auto Zoom" feature which only available in the pro version of the advanced iframe.

Please read this first: Advanced iframe has already a fixed zoom. So why is an auto zoom needed? If your parent is responsive and your content not you don't know which zoom you have to use. Auto zoom does read the width of the remote page and calculates the needed zoom factor to display the full page. So it depends on your requirements if this feature is the one you need.

Please note that this feature does only work for all modern browser. So IE 6+7 are not supported anymore. If you need to support older browser you should use the browser detection and display an alternative content for this users.

The examples below show an responsive parent page with an iframe page that is not responsive and has a fixed width of 800 px. Example 28 shows how it would look like without this feature.

Example 29: No zoom
Example 30: Auto zoom iframe on the same domain
Example 35: Auto zoom with a fixed ratio
Example 31: Auto zoom iframe on a remote domain

To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only=”true” that none of the settings from the administration are used.

Example 29: No zoom

This example shows an iframe with a width of 100%. The content is not responsive and has width of 800px and a height of 320px. This example does only exist as reference that you can compare how it look with auto zoom than!

The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example_fixed.html" id="advanced_iframe_29" height="340" width="100%"]

Example 30: Auto zoom iframe on the same domain

This example shows an iframe with a width of 100%. The content is not responsive and has width of 800px and a height of 320px. This time auto zoom is enabled. Also responsive is enabled that the iframe also gets resized when you change the browser size.

Example 35: Auto zoom iframe with a fix ratio

This is an interesting feature if you cannot measure the height of the iframe but you know the ratio. If you even know the height and width of the iframe (or you want a certain height/width) you can even zoom without access to the remote page. In many cases this is the only option to zoom not responsive websites on tablets or mobile phones if you don't have access.
So below I have a simple example of www.tinywebgallery.com/en/features.php where I want to display a width of 1000 px and a height of 800 px which gives a ratio (height/width) of 0.8.

So please make your browser smaller and see how th zoom works.

The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/en/features.php" id="advanced_iframe_35" height="800" width="100%" auto_zoom="same" auto_zoom_by_ratio="0.8|1000" enable_responsive_iframe="true"]

Example 31: Auto zoom iframe on a remote domain

This example shows an iframe with a width of 100%. The content is not responsive and has width of 800px and a height of 320px. This time only auto zoom is enabled. Also responsive is enabled that the iframe also gets resized when you change the browser size. Please note that on the remote domain you need to use the external workaround AND enable the auto height.

The used shortcode is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example30/example_fixed.html" id="advanced_iframe_31" height="800" width="100%" auto_zoom="remote" enable_responsive_iframe="true" pass_id_by_url="ai_id"]

And on the remote page for this example is set:
var updateIframeHeight = "true";
var hide_page_until_loaded_external = "true";
var iframe_url_id ='ai_id';

Have fun using Advanced iFrame Pro,

Michael