If you want to have a responsive iframe on your site the parent page AND the iframe page have to be responsive. If this is not the case you will not get the expected result.
If you google a little bit you find many solutions for responsive iframes.
Many of the solutions are only css based like
- http://andmag.se/2011/11/responsive-embeds/
- http://stackoverflow.com/questions/17838607/making-an-iframe-responsive
The big problem of this solutions is that they only work fine if the content is responsive AND you know the ratio of it. So it normally only works fine for videos and images. This scenarios are supported also: Responsive videos.
You also often find that you only need to set the style max-width:100% to the iframe.
But than you have an iframe with a responsive width but the problem with the correct height is still unsolved!
The solution is that the iframe needs to tell the parent its height after each resize. And a resize can be also a change of the browser size and also if you e.g. rotate your mobile device! Without this feature advance iframe would only to this at a page reload or if a element itself does change.
This is easy if you are on the same domain but also possible if you are on different domains. Due to the same-origin policy an iframe at a different domain can’t use JavaScript to directly communicate with the parent page. Possible solutions are to use postMessage() or XSS communication using iframes.
-> To enable real responsive iframes you need to have access to the parent AND the iframe page.
Advanced iframe does already resize the iframe to its content height on the same domain and also on different domains using the XSS communication using iframes (I call it external workaround in the settings).
Advanced iframe pro version 5.6 does put all this together and does recalculate the height at each browser resize. The only thing you have to do is to enable responsive iframe and the auto height feature in the settings and use the external workaround if needed.
Summary:
– The parent and the page you want to include into the iframe need to be responsive!
– The iframe is on the same domain as the parent or you can modify the iframe page to use the external workaround.
See the working example in the pro demo: https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes
If this does not apply for you the only other option which is maybe possible for you is to use auto zoom of the iframe. See
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-zoom-iframe-content
Get advanced iframe pro on codeyanyon: http://codecanyon.net/item/advanced-iframe-pro/5344999
Have fun using advanced iframe pro,
Michael