Fixing Web Browser Content Display Issues

Because the Canvas instance at Champlain College is secure (https://), content included on a Canvas page that is insecure (http://) will not display. Sometimes users can make an exception or work around the problem by opening a link in a new tab, but this is clunky, so it is better to avoid the problem in the first place.

Resolutions for Content Types

Embedded videos

We recommend using videos from YouTube or your own videos from Panopto when possible. Canvas includes a tool for finding and embedding YouTube videos (learn more in our article on embedding media). The Panopto integration in Canvas makes embedding and security easy.

You can also embed video from other sources. Vimeo and TED Talks generally work well using an iframe embed. Embeds from other sources may work, but the host needs to support https (ie, the URL, when copied, will begin https://, rather than http://). Learn more about how to embed a video from sources like Google Drive, TED, a YouTube link you already have, and others.

Images

Storing an image in the course itself is the best way to avoid problems, as long as copyright permits. This means uploading the image and embedding it into the page, discussion, assignment, etc. You can also add a stock image from UnSplash using a tool native to Canvas; this is great for decorative or generic example images, and is a good route to take if you are having display issues with other images. Learn more about embedding images and media in Canvas.

When you embed images, make sure to include alternative text (alt-text) for ADA compliance unless the image is purely decorative. Alt-text may also display if the image “breaks”, which is helpful to users.

Links from Modules

When building Modules, you have the option to add external URLs. By default, these open in a preview frame in Canvas; however, the combination of Canvas’s security protocols and site security often prevents these links from opening in the preview. Students will still have the option to open the link in a new tab, but it’s an extra step. To avoid this, you have two options:

• Simplest: When adding the link to the Module, click the “load in a new tab” box. This will force the browser to open the link in a new tab, bypassing the problem.
• Instead of adding the link to the Module, create a page and link to the site from the page.