Embedded Content

[   User Guide Navigation]

Formatting Text & Media Embedded Content

To embed videos or other media hosted outside of Canvas, use the Embed tool in the sidebar. After pasting the embed code, you can adjust the width and height of the embedded object and wrap text around it if desired.

 Tip for Embedding

If you are embedding multiple items, such as a series of videos, on a single page, you may wish to first add a panel group (Accordions, Expanders, or Tabs) to provide an easy method to navigate the multiple embedded items without significant scrolling.

Instructions

Embed an external video or other media

  1. Place your cursor in the editor where you want the embedded object to go.
  2. Open the Add New Elements ( ) tab in the sidebar.
  3. Select the  Embed tool. The Edit Current Element  ( )  tab opens with Embed selected as the active tool.
    Embed tool
  4. In another browser tab, copy the embed code for the object to the clipboard.
  5. In the Content panel, select the words "[Embed Code]" and replace them by pasting the embed code you copied to the clipboard. 
    Embed Tool: Embed Code
  6. Click  Save Changes.
  7. Open the Style panel to set the width, height, and text wrap for the object.
    Embed Tool: Content Panel
    • Width: Set the width of the embedded content. The width change will not be visible until you save the page or item.
    • Height: Set the height of the embedded content. The height change will not be evident until you save the page or item.
    • Convert Unit Button: Change measurement units from pixels to percentages or vice versa.
    • Scale Proportionally: When checked, this option preserves the relative proportions of the original object while increasing or decreasing the size of the object.
    • Fill Width: When checked, this option will allow the embedded object to fill the entire width of the page or container it is in.
    • Alignment Buttons: Allow the embedded content to be justified to the left, center, or right within the current container, or reset to the default setting.

Edit an embedded object

  1. Select the  Edit Current Element  ( ) tab in the sidebar.
  2. You may not be able to select the embedded object by clicking on it. If not, place your cursor in the text or a blank line immediately above or below it. Then use the up or down arrow keys to select it.
  3. Once the object has been selected, the Embed tool will become the active tool.
    Embed tool
  4. Use the options available in the Style panel to make the desired changes.

Learn More

Cidi Labs DesignPLUS User Guide: Embedding