Embed self-contained HTML in a sandboxed frame

Configure embed blocks

Use an embed block to show external content on a page — for example a YouTube video, a map, or a form. You can either paste an https:// URL or supply your own self-contained HTML, CSS, and JavaScript.

Add an embed block

1. Select a page in the outline, then choose Insert block and add an Embed block.
2. In the inspector, choose how you want the embed to work:
   • Embed address — paste an https:// link to the content you want to show, such as a YouTube or Vimeo embed link.
   • Embed code — paste self-contained HTML, CSS, or JS. The code runs inside an isolated frame with no access to the rest of the app.
3. Give the embed a Frame title so screen readers can describe it to learners.
4. For a URL embed, choose a Frame shape (widescreen, classic, or square). For custom HTML, set a fixed Height (px) between 40 and 4000 if you want to override the default shape.

Open Preview to confirm the embed displays the way learners will see it.

Availability and limits

• URL embeds must start with https://. Addresses that don’t won’t save.
• Custom HTML embeds are capped at 120,000 characters.
• An embed block uses either an address or custom code, not both.
• When you set a fixed height, it replaces the aspect-ratio shape.
• Embeds never block learner progress. If you mark an embed as Required for learners, Review checks that it has an address or code.

In learner preview, an embed block renders a live sandboxed iframe; the editor shows only a placeholder card. Full-resolution PNG

Select an embed block to configure its URL or HTML code, height, aspect ratio, and title in the inspector. Full-resolution PNG

On a phone, open the inspector drawer to access the embed address, frame title, and frame shape. Full-resolution PNG

The Embed code editor contains self-contained HTML and CSS, rendered in an isolated frame. Full-resolution PNG

Set an optional **Frame height** (40–4000 px) to replace the aspect-ratio shape with a fixed height for your HTML content. Full-resolution PNG

Open **Preview** to see how the custom HTML renders in the sandboxed frame that learners will see. Full-resolution PNG

Add managed assets and automatic height

Choose Enable managed component in an HTML block’s properties for the inline-v1 component profile. It adds managed asset bindings, source Apply, automatic height, theme options, and an explicit Interact mode on the canvas. Use a managed HTML component explains the controls and limits.

This conversion does not import a website or ZIP package. Modules, external services, nested frames, and forms are unsupported in the managed profile. Ordinary embeds remain available without conversion.

Managed component properties provide explicit source Apply, automatic height, and course color-token controls. Full-resolution PNG