Question posted in
The full documentation can be found here.

Divi builder – Resizing iframe to fit in parent div

I have created an Adobe Edge Animation that I have exported as responsive HTML and Javascript.

You can view the animation here as a single html file: (u: demo p: testing)

https://boomboxdevdev.wpengine.com/boombox_anim/boombox_HTML5_Canvas.html

I now want to use an iframe to embed the animation into a divi code module.

I have done so and it can be viewed here: (u: demo p: testing)

https://boomboxdevdev.wpengine.com/

I am trying to fit the iframe exactly to the parent div, but cannot figure out how.

I am using wordpress with the Divi them and page builder.

Tags:

2

Answers


  1. 0

    Short answer: without controlling both the parent and iframe source code, you can’t.

    The whole point if iframes is that the parent has no idea what’s running inside the iframe, and has no access to anything inside of it. It would be incredibly insecure otherwise (and in fact, used to be. Once upon a time you could just embed a bank’s website in an iframe and then query the iframe. It was a wild time) so if you know the size of your content: make the iframe markup use that size by specifying width and height attributes.

    If you don’t: you’ll have to negotiate dynamic resizing using postMessage, where you make sure the iframe’s page has JS to accept a message asking for its content dimensions, so that the parent can post that message and get a width/height back that it can then use to resize the iframe element.

    Or if that’s not an option: you’re out of luck.

    Login or Signup to reply.
  2. 0

    One of your issues is that your iframe has the following onload

    onload="this.width=screen.width;this.height=screen.height"

    So the iframe stays at the height of the screen it’s loaded on regardless of the content but max-width is limited to 100%. While your iframe content has some code that resizes it dynamically. You could try to hack something to set the dimensions based on the viewport and the dimensions you know the iframe contents will also be since you have control over that, but if there’s any changes you’ll have to redo that.

    But if you have all this could you not take the html and the scripts generated and bring them into the page as just another element rather than using an iframe?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search