TC Technology Knowledge Base

Set a cover video in the Canvas Course Template Welcome presentation

Updated on

This advanced tutorial covers how to upload a video file to your course media and then use HTML code to put that video in place of the still image of TC in your course's Welcome presentation. 

Useful shortcuts for this tutorial:

Ctrl+C/Cmd+C to Copy; Ctrl+V/Cmd+V to Paste; Ctrl+Click/Cmd+Click to Open link in new tab.

Part I: Uploading your video

1. Find a short video clip you want to use, and save it somewhere accessible on your computer

Ideally, the video should be under 15 seconds. If the video is too long, or if the file is too large, Canvas may struggle to upload or play it.

2. In Canvas, use the left side navigation to find Files

It is recommended, to stay organized, you add the file to the "Uploaded Media" folder.

4. Add your video to the folder.

Option a. Drag and drop your video file from your computer's File Explorer/Finder into the Canvas folder

Canvas Demo

Option b. In Canvas, click the blue "Upload" button at the top right, then select your file in File Explorer/Finder

Part II: Adding your video over the still image in the Welcome presentation

It is strongly recommended you open your homepage in a new tab, so you can easily access your Files later in this process. Ideally, you will have tabs for both your Homepage and Files open simultaneously.

Ctrl+Click/Cmd+Click the Home link in the left side navigation to open it in a new tab

2. On the home page, click the Edit button.

Home Page: Template Form Test - [Brennan] - Google Chrome

3. Open the HTML editor.

<div class="carousel-item item-1" style="padding-left: 0; overflow: auto;"><img class="hidden" src="https://tc.instructure.com/courses/12779/files/891814/download" data-api-endpoint="https://tc.instructure.com/api/v1/courses/12779/files/891814" data-api-returntype="File" />

5. After the code you located in Step 4, press Enter/Return to create space to paste the following code:

<video id="cover-video" style="position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%;" muted="" width="300" height="150"> <source src="[ThisWillChange]" /> </video>

6. Return to your Files and locate the video you uploaded

Files - Google Chrome

8. Return to your Homepage and HTML editor.

9. Find [ThisWillChange] in the code you pasted for Step 5.

Home Page: Template Form Test - [Brennan] - Google Chrome
Home Page: Template Form Test - [Brennan] - Google Chrome

Make sure there are no spaces left between your Link Address and the quotation marks.

11. Save your work.

Previous Article Replace a faculty picture in the Canvas Template
Next Article Upload a course introduction video on the Home Page with the Canvas template