Hero Image

iFrame

If you need to embed content from another site or application into your site, you can do this with an iFrame. iFrames allow your browser to create a window to another site by specifying the URL or address of the other site and can be adjusted to fit your desired height and width.

Site Builder's iFrame asset allows you to deploy your outside content quickly and without having to know any HTML. To use the iFrame asset, select it when creating a new asset.

iFrame Asset Selection

Once you initialize the iFrame asset, you'll have some additional options to control how you want your iFrame to appear.

View of entire iFrame Asset settings

Here's a breakdown of each of the options:

  • Asset Title - You can change the name of the asset and set it to show or not show using the controls on the top.
  • iFrame URL - This is the full address of the content you will display. If you are embedding a YouTube video, this would be the embed URL which looks something like this: http://www.youtube.com/embed/5C9gHX0URpQ
  • iFrame Width and Height - The width is set as a percentage of the page width. 100% would be the full width of the page. The height is set in pixels.
  • iFrame Border - Off by default, when added the iFrame border will display as a slightly thick beveled border. For most uses of this asset, the border will probably be unnecessary.
  • Full Width Column - This option is pulled from the "Page Properties." It will allow you to remove the white space, or padding, around the asset so it displays across the entire width of the page. You'll need to set the width to 100% to get the desired result. Also, turning the padding off will also switch your page to a one column display if it is set to two columns.
  • Side Navigation - If you're using the no padding option, you may also want to turn off the side navigation on this page, so that your content goes full screen. If you turn off the side navigation, be sure to give your users a link either in the page or top navigation, so they can find their way back to the parent page.

Here are some examples of how the iFrame will look:

With Padding and Navigation
With Padding and Navigation

Without Padding but With Navigation
Without Padding but With Navigation

Without Padding and Without Navigation
Without Padding and Without Navigation

With padding and with navigation in a two column
With padding and with navigation in a two column