iframe Shortcode – AHC and ESSL WordPress Hosting Service

Using the iframe Shortcode

The <iframe> element creates a space on a page which then loads its content from another URL – it is stripped out of WordPress user content by default as it poses a security risk. Cross-site scripting (XSS) enables attackers to inject client-side script into pages, which can compromise the security of a site, or set various cookies on user’s machines which may contravene the site’s privacy policy. It is therefore important that this shortcode is used with caution.

Example

Given the youtube video embed URL:

The corresponding iframe shortcode would look like this:

[iframe src="https://www.youtube.com/embed/yPGIBahjAvM"]

Which would result in this:

The width and height should be set explicitly on the shortcode (defaults are a width of 100% and height of 300 pixels). In the above example, adjusting the width to 520px will allow the video to fit on this page (which means the height needs to be set at (315/560)*520 = 292)

[iframe width="520" height="292" src="https://www.youtube.com/embed/yPGIBahjAvM"]

Which would result in this:

Shortcode options

url: required
The URL of the content you want to load in the iframe.
title: [text]
The title of the iframe (this is used in the title attribute, and will generally not be seen by the user).
scrolling: [yes, no, x or y]
Whether the content of the iframe should be allowed to scroll, and in which direction. The default here is to leave this behaviour up to the browser, which will then be dictated by the content of the iframe and its dimensions on the page.
width: [measurement in pixels or percent – default 100%]
The width of the iframe – pixel based widths just require a number, percentage widths should use the percent symbol. The width of an iframe using a percentage width will be dependent on the width of its containing element.
height: [measurement in pixels – default 300]
The height of the iframe (in pixels – using a percentage here may result in inconsistent results across browsers).
border: [measurement in pixels – default 0]
The border around the iframe.
bordercolour: [hexadecimal colour code – default #fff]
The colour of the iframe border.
margin: [measurement in pixels – default 0]
The margin to apply to content inside the iframe.
style: [set of style rules suitable for a style attribute]
Additional styles which you’d like to apply to the iframe.