Skip to main content

Integrating Library Resources into Teaching and Learning: Embedding Content

Tips and tricks for using library resources in your courses, including reserves, persistent links, video, images, and more.

Embedding Content in Canvas

What is an embed code?

An embed code is a snippet of HTML that is inserted directly into a page's source HTML. The embed code is a container for interactive content, such as a video. You can also embed webpages and other types of content.

Using Embed Codes in Canvas

Whenever you post content in Canvas (whether you are posting a page, an announcement, an assignment, a quiz, etc.), you'll bring up a rich text editor (pictured below). To insert an embed code, click on the HTML editor link to switch over to the HTML source view. Insert the embed code where you would like it to appear in the document. When you switch back to the RTE using the link in the top right corner of the editor, the embedded object may not display correctly. Some embedded objects will only display once the content has been saved. If the content is not displaying correctly outside of the RTE, after it has been saved, it might indicate the embed code contains a tag or an attribute that isn't allowed in Canvas. 

For those who are interested in learning more, you can view the Canvas HTML Editor Whitelist to see which HTML tags and attributes are supported. This document also lists allowed style properties (if you want to use inline CSS).

Embedding Videos

The MCC library has access to several video databases (see the Video Research Guide for more information).

You can link directly to individual videos or embed the video content directly. In the Alexander Street Press databases you will see the option to Share your playlist or to Embed/Link, which will bring up the embed code and the persistent link.

Use the proxy prefix with the permanent link to create a persistent link directly to the video.

Embedding Credo Articles

Content from Credo Reference can be embedded within Canvas using the supplied embed codes. Here is an example (the border and shadow were added to the supplied embed code):

 

 

 

To access the embed code, press the embed icon found towards the top right when viewing an article (close to the article's title).