This demo shows the”responsive iframes” feature which only available in the pro version of the advanced iframe.
Please first read the post about responsive iframes for more details. In summary you need the following:
- The parent and the page you want to include into the iframe are responsive!
- The iframe is on the same domain as the parent or you can modify the iframe page to use the external workaround (See example 2 and 3)
The following examples with the used shortcodes can be found on this page:
- Example 19: Responsive iframe on the same domain
- Example 20: Responsive iframe on a different domain using the external workaround.
As you have already noticed this example page has a different theme as the rest of the page. I use the theme "Twenty Twelve" which is a default theme of WordPress together with "jonradio Multiple Themes". I really has big paddings but shows the responsive iframes very well.
Example 19: Responsive iframe on the same domain
The first example uses an iframe where the page inside the iframe is on the SAME domain. The iframe below has a maximum width of 900px. But if you make it smaller the iframe does get smaller also and the content height is set to the new height. Please note that you have to set onload_resize="true" and enable_responsive_iframe="true" because for remote pages the setup is a little bit different (See the next example).
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example19.html" id="example19" height="300" width="900" hide_elements="#secondary" content_id="#primary" content_styles="width:100%" onload_resize="true" enable_responsive_iframe="true"]
Example 20: Responsive iframe on a different domain using the external workaround.
The 2nd example uses an iframe where the page inside the iframe is on a different domain.
You need to be able to modify the external web page you want to have in the iframe to use the workaround!
The iframe below has a maximum width of 800px. But if you make it smaller the iframe does get smaller also and the content height is set to the new height.
Because different configurations are used on this page the code changes in the external page are defined before the script is included:
<script>
var iframe_id = "example20";
var updateIframeHeight = "true";
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
</script>
<script src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.mdempfle.de/examples/example20/example.html" id="example20" height="300" width="800" enable_responsive_iframe="true"]
Have fun using Advanced iFrame Pro,
Michael