The Embedded Content component in Create allows you to integrate external media directly into your project layouts. This ensures your learners enjoy a seamless, interactive experience without ever having to leave the page.
This guide will walk you through how to add the component, configure the two different integration methods (Website Link and Embed Code), manage frame sizing, and ensure an accessible and smooth experience for your learners.
Adding the Embedded Content Component
To add the component to your page:
- Open your page in edit mode.
- Select Add a component where you want the content to appear.
- In the component modal, scroll to the Presentational section and select Embedded content.
Once added, select the component to open the Embed properties panel on the right side of your screen.
Choosing Your Integration Method
In the Embed properties panel, you will see a Type dropdown. You can choose between two methods to display your content:
Option 1: Website Link
This method is ideal for direct URLs from trusted platforms.
- How to configure:
- Select Website link from the Type dropdown.
- Paste the direct URL of your external resource into the Link field.
- Enter descriptive Alt text. This acts as the iframe title, which is vital for screen readers to satisfy WCAG accessibility requirements.
Option 2: Embed Code
This method is used when you want to paste raw, third-party embed HTML (such as <iframe> or <script> tags).
- How to configure:
- Select Embed code from the Type dropdown.
- Paste the full HTML snippet provided by your third-party site into the Embed code input box.
- Note that the Alt text field is not present here; screen readers will rely on the native properties defined in your raw code.
Managing Sizing and Dimensions
The way you resize your embedded content depends entirely on which integration method you have chosen:
Sizing for "Website Link" (Frame Size Controls)
When using the Website link type, you have full access to the Frame size customization settings in the properties panel:
Sizing for "Embed Code"
When the Embed code type is selected, the Frame size control panel is hidden.
- How to resize: Because the styling is driven by the third-party provider, any adjustments to the display size must be made by manually editing the width and height properties directly inside your pasted <iframe> code (e.g., changing width="600" to width="100%" or a different pixel value).
Ensuring a Great Learner Experience
Using the "Open in New Tab" Fallback Toggle
Some websites restrict embedding on external platforms due to their own security policies (known as X-Frame-Options). To make sure your learners never miss out on important content:
- Toggle on Show "open in new tab" link at the bottom of the properties panel.
- This displays a clean, user-friendly fallback link directly below the embed, allowing learners to easily access the resource in a new browser tab if the iframe fails to load.