iFrames: Adjusting Width for Responsive Sites
What is an iframe?
iFrames, short for inline frames, are used to embed another HTML document within a frame. They are often useful for putting videos or calendars from other websites directly in your page.
For example, if you click "share" below a YouTube video you can select "Embed" to get the iframe for the video:
Here's an example from Google Calendars:
Please see our Embed Code Article if you'd like to learn more about embedding iframes in your page.
The problem with fixed sizes
iFrames are very common and can be useful in many ways. Unfortunately they have a fixed size. That means they are always the same size and never change, even if you view them on a phone or change the size of the browser window.
This doesn't work well in a website design that can dynamically change in response to varying window sizes.
Consider your mobile device, which has a window size of somewhere around 320px. If the width of the iframe is 560px, this will cause it to protrude beyond the mobile window. This means you have to scroll horizontally to see the entire iframe.
Dynamic sizes
To correct this issue the size needs to be a percentage based value. This allows the iframe to change size with the window size and website design.
Using the 'source code' tool, we have pasted the embed code from a Google Calendar. Change the width to 100%.
This will result in an embedded Google Calendar that fills the entire container.
You may need to adjust the height value to get the frame to be just right.
Now your embedded movie, pdf, or calendar will display appropriately on different window sizes