1. Home
  2. Canvas
  3. Display a Google item in Canvas as an iframe
  1. Home
  2. More
  3. Display a Google item in Canvas as an iframe

Display a Google item in Canvas as an iframe

To watch the video below, click play.
To enlarge a video while playing, select the fullscreen icon: Fullscreen icon.
To hide or show subtitles while playing, select the CC icon: CC icon.
To jump to a specific section, select the table of contents icon:
Table of contents icon.
You can select a chapter (on certain videos only), or type a term into the search field and select a returned result.

The video below demonstrates how to embed a Google Doc (or other collaborative Google item) into a Canvas Discussion as an iframe. This method can also be used in Canvas Announcements, Assignments, Pages, and Quizzes.

Users will be able to collaborate on the document from Canvas directly.

Click here to open the video in a new tab, watch the video embedded below, or scroll down for written instructions.

  1. Copy the HTML below:

<p>

    <iframe src=https://docs.google.com/document/d/e/2PACX-1vQ_-d2z9L7_I_pU8ETrmgiam6U5MYCdY_1keUQkX6imIGmN8TsK7Nu2VnE_6k4C0cFf1zSh8_fUINQ8/pub?embedded=true width=”800″ height=”800″></iframe>

</p>

  1. Go to the Canvas Discussion (or Announcement, Assignment, Page, or Quiz) where you wish to embed the Google item.
  2. Click the Edit button at the top right:Button that says Edit with a pencil.
  3. Click the HTML icon near the bottom right:Left and right angle brackets containing a forward slash.
  4. Paste the HTML.
  5. Open the Google Doc in a new tab.
  6. Click the Share button near the top right. In the window that opens, click Copy Link.
  7. Go to the Canvas Discussion again. Carefully isolate the URL highlighted below and replace it with the link that you just generated from the Google Doc:HTML code. The portion between "src=" and before the space before "width" is highlighted.
  8. To see how your Google Doc looks in Canvas, click the HTML icon again.
  9. Click the Save button at the bottom right.

  10. If you need to adjust the size of the frame in which your Google item is being displayed, go into HTML mode again by clicking the Edit button and selecting the HTML icon. Try changing the width from 800 px to a different size (e.g. 1000):HTML code with "1000" highlighted. It appears after width="
  11. Click the Save button at the bottom right of the Canvas item. Repeat the process as needed using different numbers for the width or height to find an adequate display size.

 

 
Updated on April 28, 2021

Was this article helpful?

Related Articles