The iframe component, whose option icon is shown below, embeds content from another site into your page.
Any web page can be embedded in an iframe, but you should ensure that you have the permission of the site owner to embed their content. There have been legal cases due to a website being framed without permission (see, for example, Washington Post Co. v. Total News, Inc.).
Embedding a page that has not been designed for use in iframe will lead to a poor visitor experience. For example, if the page is larger than the iframe then scroll bars will be required. Additional scroll bars within a page confuse visitors, and horizontal scroll bars are particularly difficult to use.
Iframes in third-party widgets
Many sites provide widgets that can be embedded within your site, and these widgets often use iframes. The third-party site will provide HTML code, which might look something like this:
<!-- begin example.com widget -->
<iframe src="http://example.com/widget/" width="200" height="400" scrolling="no">
<!-- end example.com widget -->
If the code contains the word iframe (highlighted in blue in the example above) then the widget uses an iframe. Shortly after the word iframe you should see the word src followed by an address within quotation marks (highlighted in orange in the example above): this is the address to use in the iframe component.
Editing an iframe
Click anywhere on an iframe to display the iframe editor:
The iframe editor lets you change the following settings:
Address to show
The address of the content to show in the iframe.
Height (in pixels)
The height, in pixels, of the iframe.
Whether to show scroll bars on the iframe always, never, or only when the content is larger than the iframe.
The following settings control what the content in the iframe is allowed to do. By default the allow forms, allow scripts, and allow same origin settings are checked, but you may find you need to check the allow top navigation or allow pop-ups settings for widgets such as booking forms (which tend to load a new page when submitted) to work properly.
Check this setting to allow forms to be submitted within the iframe.
Allow same origin
Allow full screen
Check this setting to allow the content in the iframe to expand to cover the full screen.
Allow pointer lock
Check this settings to allow the content in the iframe to hide the mouse pointer and use the mouse for input — this is useful for 3D games, for example.
Check this setting to allow the content in the iframe to a load a new page in a new window or tab.
Allow top navigation
Check this setting to allow the content in the iframe to a load a new page in the current window or tab.
Click OK to apply the changes to the iframe. Click Cancel to return to the page without changing the iframe.