In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Adjust the iframe’s height with JavaScript

By using the following piece of JavaScript you can adjust the height of the iframe element to match the height of its content:

This article shows examples of how to embed video and other iframes in a responsive web design and has examples with YouTube, Vimeo and Slideshare.
I found a neat little CSS trick on the A List Apart article “Creating Intrinsic Ratios for Video” and I did some experimenting with it. (Yes, I had to look up the word Intrinsic…)
The problem with embed code that you copy from websites like YouTube is that they often contain a fixed width and height in pixels. And that does not work too well in responsive designs. In a responsive design we have a container with a relative width and we want the embedded object to be relative to our container. This is not possible with all embeds as some of them insist on having a fixed width. If you encounter such embeds, the workaround is probably to move some of the code to the server side or javascript and set the width to the pixel value that you think is most appropriate. It will work, but it will not be flexible like the method shown here.
This technique is fully flexible and I have tests below with Vimeo, SlideShare and YouTube (sorry if this post took long to load…). Here are the steps to make it work.

En dissektion av Google Maps som använder avancerad webbteknik för att leverera sitt resultat.

En text om iframe, hur de fungerar i olika webbläsare, främst med inriktning på hur man accessar dem med länkar.

En sida som använder en bra variant av overflow:auto som ska fungera bra enligt denna tråd: http://www.csscreator.com/css-forum/ftopic4165.html

En artikel om nackdelarna med frames.