Creating embedded iFrames using the Auto iFrame plugin

Rayos utilizes the Auto iFrame plugin as a quick and easy way to embed iframes on your site.

iFrame Shortcode

In order to create an embedded iframe, you simply use the shortcode “auto-iframe” and include information about the link within the shortcode’s additional properties. For example:

[auto-iframe link=xxx tag=xxx width=xxx height=xxx autosize=yes/no]

Additional properties

Extra properties can be used in the shortcode to further modify the look iframe. To add these properties, just add each after the “link” field of the shortcode as seen in the example above. The additional properties are:

  • link = the url of the source for the iframe. REQUIRED.
  • tag = a unique identifier in case you want more than one iframe on a page. Default = auto-iframe.
  • width = width of the iframe (100% by default). Can be % or px. Default = 100%.
  • height = the initial height of the iframe (100% by default). Can be % or px. Default = 100%.
  • fudge = a fudge factor to apply when changing the height (integer number, no “px”). Default = 50.
  • border = enable the border on the iframe. Default = 0.
  • scroll = enable the scroll bar on the iframe. Default = no.
  • query = pass the parent’s page query string to the iframe. Default = no.
  • autosize = enable the auto sizing of the iframe based on the content (see note below). The initial height of the iframe will be set to “height” and then resized. Default = true

Note: Automatic resizing of the iFrame for cross-domain sites (a site with a different domain) does not work due to browser security provisions. In this case, you need to include a height and width for the iFrame.

Adding Shortcode to Your Site

To add this shortcode on your site, you can do it in two different locations:

  • Articles: To add the shortcode to an article, just enter it into the article body. It will render on the frontend of the site.
  • Pages: Add the shortcode to either a Text Block or Raw HTML page element.

More information

For additional information, see the plugin’s documentation page.