Embed an Iframe in Canvas

Tags canvas zoom

What Is an Iframe?

An iframe (short for inline frame) is an HTML element that allows you to embed external web content—such as videos, documents, or interactive tools—directly within a Canvas page. This is especially useful for instructors who want to integrate resources from platforms like YouTube, Google Docs, or Mediasite into their course materials without requiring students to leave Canvas.

Step-by-Step Instructions for Instructors

Step 1: Get the Embed Code or URL

  • From platforms like YouTube, Google Docs, Mediasite: Copy the full <iframe> embed code provided by the platform.
  • From a regular webpage: Copy the full HTTPS URL of the page you want to embed.

Step 2: Open the Canvas Page

  1. Navigate to your Canvas course.
  2. Go to the page where you want to embed the content.
  3. Click Edit to open the Rich Content Editor.

Step 3: Switch to HTML Editor

  • In the Rich Content Editor, click the HTML Editor icon (</>).

Step 4: Insert the Iframe Code

  • If you have an embed code: Paste it directly into the HTML editor.
  • If you only have a URL: Use the following format:
<iframe src="YOUR_WEBSITE_URL_HERE" width="800" height="600" title="Embedded Content"></iframe>

Replace YOUR_WEBSITE_URL_HERE with the actual HTTPS URL.

Step 5: Adjust Dimensions (Optional)

  • Modify the width and height values to suit your layout or screen size preferences.

Step 6: Save the Page

  • Click Save to apply your changes.
  • The embedded content will now be visible when viewing the page in normal mode.

Important Notes for Instructors

  • Use HTTPS: Canvas only supports embedding content from secure (HTTPS) websites.
  • View Mode Only: Iframe content will not display in Edit mode—only in View mode.
  • Responsiveness: Consider adjusting dimensions for optimal display on mobile or tablet devices.
Print Article