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:
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.
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
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.
Need support?
The Web team is here to help.