Video Embeds

Code Tutorial

In order to insert an external video into a Canvas page, you will need to copy and paste a video embed code. Platforms like Kaltura and YouTube have some preset options that will determine how the embed code displays the video, and by editing the HTML you can further customize it. The following are some platform-specific recommendations for how you should prepare a video embed code for Canvas.

Best Practice: Embedding vs. Linking

There may be rare instances where you want to reference a video without embedding the actual video in your page. Inserting an external link to a video is okay as long as the link has descriptive text, but this should generally be reserved for optional or reference content that you expect most people not to watch. Please note that you can't copy and paste the URL with a Vimeo video the way you can with a YouTube video.

 

Kaltura

If you've never used Kaltura before, we first recommend visiting Penn State's Kaltura support site Links to an external site..

Kaltura provides a few options for altering video embed codes, such as choosing the player skin, size, and start and stop times. There are two ways to generate an embed code for a video, either through the Canvas RCE or by going to the video in your Kaltura MediaSpace Links to an external site.. In the MediaSpace, locate the video you wish to embed and go to the share tab. From here select Standard Embed and you will see the following default options:

  • Player Skin: Embed - no transcript
  • Player Size: 560 x 590
  • Responsive Sizing: Off

We recommend the player without a transcript because the transcript appears as an uninterrupted block of text beneath the video and cannot be collapsed. See the Library Code section for ways to add a video transcript. After pasting the embed code into Canvas, you can edit the height to 350 if you want to reduce the black bars below and above the video.

kaltura video embed code options

The other method for embedding a Kaltura video is by expanding the Apps icon in the RCE and choosing Embed Kaltura Media. The embed code settings via this method are slightly different, providing you with options for making the video downloadable and giving it a selectable thumbnail, rather than showing the player by default. Turning on Thumbnail Embed removes access to the player controls until the video starts playing, so you way want to leave it disabled.

kaltura video embed code options in the Canvas rich content editor

 

YouTube

For help with adding a YouTube video to a Canvas page, view the official instructions for embedding a YouTube video or playlist Links to an external site.. 

Like with Kaltura, once you have an embed code for a YouTube video, there are several customization options available. You can add a start time by using the check box at the bottom of the Embed Video selection, along with deciding whether or not to show player controls and enable privacy-enhanced modes. However, adding a stop time needs to be done in code.

youtube video embed code options

Adding a Stop Time

Calculate your stop time in seconds (e.g., 1 minute, 30 seconds would be "90") and add this to the end of the video URL within the embed code.

For example a video that you want to begin at second 0 and end at second 90 would look like this:

src="https://www.youtube.com...?start=0&end=90"

 

Vimeo

In order to embed a Vimeo video, do the following:

  1. Go to the video on Vimeo.
  2. Select the Share button that appears when you select or hover over the video player.
  3. In the pop-up window, you'll see a field containing embed code for the video.
  4. Copy the embed code.
  5. Go to the HTML view of your Canvas page and paste the code.

There are several options available when generating an embed code from Vimeo.

Vimeo embed options

We recommend using either the suggested fixed size or selecting Responsive. Keep in mind that the Responsive option will make the video player extend the entire width of the Canvas page.

Resources