Responsive iframes with Advanced iFrame Pro
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
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.
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.
-> 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.
- 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: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/responsive-iframes
Get advanced iframe pro on codeyanyon: http://codecanyon.net/item/advanced-iframe-pro/5344999
Have fun using advanced iframe pro,