Embedding Videos in eClass

Article Last Updated June 2018

This article will show you how 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 example 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 elsewhere.

**The recent improvements (Fall 2014) to the google drive video viewer have made this our recommended practice for video uploading and embedding in eClass whenever possible. This process allows the best flexibility over controlling student access to files (the normal google drive sharing features apply), reasonable support for a variety of video upload formats (https://support.google.com/drive/answer/2423694?hl=en), and the added benefit of keeping the file inside the google Ualberta educational domain.

The first step is to get the embed code from the video itself:


1. For our example, access the video on your UAlberta Google drive. Note that you need to handle the sharing of the file within your google drive. To do this: right-click on your video file name, then select Share from the dropdown menu.

2. Click Advanced near the bottom right and then decide how to share by clicking Change beside the existing Sharing options. 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. This is the option selected in the example. Click Save, then Done to store the sharing changes.

Once the sharing settings are made, you may choose to simply share the link (instead of embedding the video) - 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 prevent users from downloading a video in the google drive settings as well. You can do this in the google drive advanced sharing interface:


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.

5. A dialog box will now appear with the embed HTML - highlight and copy the code and then return to your eClass course.



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: 


(5 vote(s))
Not helpful