In short, an iframe is an HTML document that is embedded inside another, such document on a website. In other words, an iframe can be used to insert a piece of content from another source into a webpage.
There are certain scenarios when using iframe within your pages is fine, such as when you have relatable, externally hosted content (an image, embedded video, short instructions, small decoration to name a few), you wish to have on your page.
However, the constant use of iframes can affect your ability to customize your pages. CSS on your site cannot affect content within an iframe, because it is hosted elsewhere. Iframes should not be used as an essential part of your site, but rather as a piece of content within it. For example, if you have an external hosted page, it is advised that one should not iframe it within another to save time and resources on recreating it.
Additionally, any time an iframe is loaded, scripts on the iframed page load. This can inflate Google Analytics or HubSpot page views of the iframed page.
To create an iframe:
<iframe src="$PAGEURL" width="$WIDTH" height="$HEIGHT" frameborder="0" scrolling="no"></iframe>
Replace the following variables:
- $PAGEURL with the URL of the content you are iframing
- $WIDTH with the width the iframe should span (px or %)
- $HEIGHT with the height the ifram should span (px or %)
To complete the insertion of the iframe, take the code and insert it within a HTML module of the page you're inserting the iframe into.