Embedding Videos in eClass
Article Last Updated August 2020
This article describes the different mechanisms that instructors can use to embed videos in for students to watch. Please review our lecture recording overview for information on how to record videos.
Please note: sharing via url linking or embedding using the 3 methods in the table below (Stream2, Google drive, and YouTube) are the recommended processes for showing videos in eClass. The instructions later in this article are an advanced method to use html to have a greater control over the placement of videos. Any of these methods is preferable to uploading videos directly into courses as that process can slow down your course and impact performance.
Manually Embedding Videos through the editor
Beyond using the tools above, it is also possible to use the HTML editor to embed videos into any of the editable content areas on eClass including content section headings, forum posts, online assignment submissions, essay questions, page resources, etc. This may be useful to place an embedded video within other content or to place a number of videos on a single page.
The example below will specifically embed a video that has been uploaded into a UAlberta google drive account but all of the eClass-side steps apply equally to videos created elsewhere - users would need to get embed code for whichever video hosting platform they have selected.
A. Get the embed code from the video itself:
1. For our example, access the video on your UAlberta Google drive that you have already uploaded and wish to share. Note that you must first ensure that sharing settings on the file within your google drive are correct for your needs. To do this: right-click on your video file name, then select Share from the dropdown menu.
2. Opening the Share options shows the existing shared users in a top panel with wider sharing options at the bottom. You can get as secure as you like by sharing the video with specific students, the google group for a particular course, or anyone with a valid UAlberta domain email address. To set the link available to anyone with a UAlberta email address, click Change link to University of Alberta below 'Restricted Only people added can open with this link' in the bottom panel right.
Once the sharing settings are made, click Copy link to simply share the link (instead of embedding the video) - by pasting this anywhere into the eClass editor will allow whoever has access and has sharing privileges to view your video. For more detail on only sharing a video url, see the article Sharing Videos in eClass.
2.b. Note: You can also prevent users from downloading a video in the google drive settings as well. You can do this through the advanced settings under the gear icon at top right and unchecking 'Viewers and commenters can see the option to download, print, and copy':
3. Next, we need to get the embed code for the video. To do so, start by double-clicking on the video to preview it.
Then, click the icon with 3 vertical dots at the right of the top tool bar select Open in new window.
4. Now, click the icon with 3 vertical dots at the right of the top tool bar and select Embed item.... (Note: if you do not see the Embed item... link, ensure that you have completed the step above 'Open in new window'.)
5. A dialog box will now appear with the embed HTML - highlight and copy the code and then return to your eClass course.
B. Embed the video through the eClass editor:
For this particular example, these instructions will show you how to add a video into a Label resource on the main page of your course. Labels are handy because they can be repositioned anywhere on your course page. Please note that a video can be embedded on any eClass area that contains an HTML editor (eg. forum posts, page resource, item descriptions, quiz questions, etc.).
1. Log onto eClass and go to your desired course. Then, click Turn editing on.
2. Next, under one of the Topic sections, click Add an activity or resource.
3. A window will pop up. Choose Label and click Add.
4. On the new page, expand the HTML editor by clicking on the icon.
5. Then, click on the Edit HTML code icon and paste your embed code in the box.
6. Click Save and return to course to save all changes.
7. The label should now look like the following screenshot: