iFrame issue with Joomag embed

MarylandSO · ‎05-05-2017

Hi there.

I'm not sure if this is the most appropriate place for this question, but I'm going to give it a try and see if someone can offer some insight on this issue.

Here is the page on my Weebly website that I'm trying to embed code:

http://www.msobravo.com/sample-issue.html

I'm trying to embed the iframe "flipbook" code for my publication that has been provided by Joomag. Here is the embed code that Joomag has given me for my publication:

When you embed that code into Weebly, it doesn't work either on the desktop or on mobile. I'm thinking it has something to do with Weebly's responsive design. I changed to the code to this:

When I use that code, it renders correctly. However, as you can imagine, it keeps the height of the iframe fixed at 538pixels on both desktop and mobile, but the width continues to be responsive (which is good). Is there any way to force Weebly to actually render this iframe box to fill both the width and the height proportionately in the given space?

The predefined sizes that joomag recommends for their viewer are 502x300 (small), 650x389 (medium), 900x538 (large). I don't want to use predefined dimensions because it doesn't look correct at all on mobile (it is too wide for the screen of an iphone).

Is there a solution that would allow my iframe to fill 100% width but also maintain the recommended ratios? To compound the problem, when the iframe shrinks to mobile size, you'll notice that the two page spread becomes one page and the ratios seem to change as the browser window size gets smaller.

Iframes drive me nuts, but it's the only code that joomag provides. There are no other embedding options. I mean, I can make it work by defining the height in pixels, but it's not a clean solution when I can't really use anything other than 100% width if I want to keep it responsive.

Thanks in advance for any insight.

Queso · ‎05-06-2017

Hello! Hopefully some of our Community members here can lend a hand with the iframes. What are you looking to do with the site at large?

MarylandSO · ‎05-08-2017

The site accompanies marketing materials that have been mailed to prospective advertisers. So, I just need the resources to be available to them.

Adam7 · ‎05-08-2017

Iframes can be pretty tricky when it comes to coding, particularly when the content is being pulled from a third party.

I found this solution on Stack Overflow after doing a quick Google search:

http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-...

I'm not sure whether that would work, but it seems fairly simple to do (the script bit could go in the Header Code field for the page you're adding it to).