Inserting an iframe in a page
Normally you should avoid using iframes to insert your visualisations because they can cause all sort of problems when used with responsive design and content with variable height.
However sometimes iframes are impossible to avoid, either because you can’t control de development environment or because you need to produce an interactive and complex piece in html, css and JavaScript that’s going to be used in other sites. The examples bellow are meant to give you an idea on how to overcome certain problems with Iframes.
▸ Fixed ratio iframes
Download
The simplest iframes, when the ratio between height and width is constant across all screen sizes. Videos usually have a fixed width/height ratio.
▸ Calculated height and frame background
Download
In this example the width and the height of the iframe is dynamically calculated to fit the place where it’s going to be inserted in.
- When the width of the place it's going to be inserted in is equal or larger than 480 pixels, it inserts a black frame around the iframe and sets the iframe size to 360x637.
- When the width of the place it's going to be inserted is smaller than 480px, it just scales the iframe in the page.
▸ Dynamic height
We can insert an iframe in a page and have it's height adjusted to the iframe's content height. This technique makes the content inside the iframe flow in the page just as it would flow if it were not inside the iframe. The content inside the iframe will not affect or be affected by the page’s CSS and JavaScript, and that’s the only reason why it’s useful.
It's a more complex technique but it's possible if we control the javascript inside the iframe and in the page where we are going to insert it. Normally we don't need to use it, so there's no examples yet. After we build our first project with this technique, we'll add it to this page.