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

  • 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.
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: http://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
http://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

2 Comments

  1. I’m having a significant amount of trouble getting my iframe embed to be mobile responsive. I have a third-party media player that has been proven to be mobile responsive, and a themify wordpress theme that is mobile responsive, but somehow the two aren’t working together. I was given code for the player, which I put into a section on the site, and CSS that I put into my custom CSS sheet. The player responds on the desktop browser, but is far too large on actual mobile devices. It fits on a landscape tablet, but not portrait, nor a phone in any direction.

    Any help is greatly appreciated!! The site is supposed to go live this weekend, and I’d really like this embed to work in order to avoid some third-rate option like a button to open in a new window 🙁 Thanks for your time!!!

  2. I would have to check the pages to tell you this. Responsive and “zoomed” by the browser on mobile devices is not always obvious.
    AI pro has several features like zoom and browser detection to solve such issues but it always depends on the pages. Getting a 100% solution for all devices is really hard sometimes.
    Especially if you got some extra css which might work fine on a destop but not for mobile devices…

Leave a Reply

Your email address will not be published. Required fields are marked *