Search code examples
javascriptcssiframedivi

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.

Solution

  • 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?