Embedding Vimeo videos in Open edX courses
Vimeo is a popular alternative to YouTube for hosting video content. In this article, we're going to take a look at how to embed Vimeo videos using the Video component, rather than HTML embeds.
Please note: Using this method requires the Vimeo Pro plan. If you would like to use Vimeo without this tier, you will need to use a regular HTML embed method instead. To do this, follow the steps laid out on Vimeo's knowledge base, and paste the resulting code into the Raw HTML view of an HTML component in Studio.
The advantages of embedding your videos using this method rather than a regular HTML embed are:
- You'll have access to the accessibility features of our video player - including the interactive transcript, multi-language closed captions, and generally accessible controls
- For the purposes of completion tracking (the green checkmarks), a user must have HTML on screen for just 5 seconds to earn completion (even if there's a video player in that HTML component), whereas the video player requires the learner to watch at least 80% of the video
For the purposes of this article, we're going to assume that you have a video already uploaded to Vimeo, as well as a course ready to insert the video. If you do not have either of these, check out Vimeo's Uploading Basics and Creating Your First Course on the Appsembler Academy.
Steps in Vimeo
Once your video is uploaded, open it up in Vimeo, and select the Advanced option on the right-hand side of your screen, the Cogwheel icon.
From there, go to Distribution and scroll down to the Video File Links section.
Under this heading, find the HLS (m3u8) option and click Copy Link.
From here, we need to head back to Open edX.
Steps in Open edX
Once you have your video, all that's necessary is to insert it into a video component, the same way you would a YouTube video link.
First, insert a video into your unit by hitting the Video button in the component tray.
Next, select the Edit button to edit this new video component's settings.
Lastly, paste your Vimeo link into the Default Video URL field.
Once you hit Save, your video will be embedded in the player and ready to go!