Skip to main content

Iframe component

The Iframe component is used to embed content from external applications directly on a web page.

The content from the external site can be basic HTML or more complex interactive applications such as widgets.

See also:

Component(s) you might want to use with this one:

Design options

Min height: Set a minimum display size for the ‘frame’ that will hold the embedded content. Only the height of the frame needs to be set.

Guidelines

Requests to embed interactive content using the Iframe component should be vetted by the UCS Web team. Embedding code from a third-party site can be risky unless the source is verified to be reliable and secure. Otherwise, it could be a gateway for malicious code to infiltrate your site, or include features that can lead to a poor user experience (UX), e.g., pop-ups, auto-play videos, etc.

Accessibility

Given that many types of content from external sites can be embedded using the Iframe component, the content at the source must ideally meet accessibility standards as required by the Government of Quebec before being considered for inclusion on AEM pages.

Examples & use cases

Various types of content can be embedded with an iframe since it nests the elements from another web page into the current one. Many third-party websites provide embed codes to use within an iframe in order to share content. Some use cases for iframes include: videos, social media, forms, widgets, web analytics, code snippets and ads.

Example of an embedded data visualization

This is an embedded interactive data visualization hosted on another site, the Tableau Public platform. The height of the frame is set to 1150 px so that it exposes all the content without excess blank space below. An optimal height can be determined through trial and error. Notice that the content is interactive and contains scroll bars, just like on the source site.

Settings

Screen capture of the settings in AEM's Iframe component for an embedded data visualization

Target application: Enter the link to the embedded content. There may be certain parameters that also need to be included at the end of the URL, depending on the platform from which the content is sourced.
N.B.: Many third-party websites provide embed codes to use within an iframe in order to share content.

Min height: Enter a number for the height in pixels.

Dos

  • Do consult with a webmaster on the UCS Web team for guidance if you're thinking about embedding content using an iframe.

Don'ts

  • Don't use the Iframe component to embed MS Forms because there's a known issue wherein the form will be blocked if the user is not already signed in to Microsoft 365. Instead, the recommended method is to copy the code for embedding provided by MS Forms and paste it into a WYSIWYG component.
  • Don't use the Iframe component to embed a YouTube video; use the Youtube Video component that was developed specifically for this purpose.
  • Don't use the Iframe component to embed videos hosted on Concordia's pegasus server (e.g., mp4 files); use the Media Player component instead. For all other videos (e.g., Vimeo), the External component is typically used.

Helpful tips & "gotchas"

  • The Iframe component is equivalent to the External component but the External component is typically used for embedding videos that are hosted neither on YouTube nor Concordia's pegasus server.

Training

The Iframe component is not covered in the AEM training sessions. AEM authors may consult with a webmaster on the UCS Web team for guidance if they would like to use it.

Need support?

The Web team is here to help.

© Concordia University