Bring your Moodle course page to life with embedded video content

Adding videos to your Moodle course page is easy and makes a big difference to how your students engage with your course. Short instructional videos can help explain concepts and save you precious time in the classroom.

It’s also good practice to add direct links to videos used in your teaching (rather than expecting students to go and find the clips on the internet and never return back to your Moodle page to study).

The easy way

Add link

Say you want to include a YouTube video to your Moodle page. You will need to open the video in YouTube and copy the link from the browser. It may look something like this:

Screenshot of a link at the top of a Browser window
Figure 1 – Screenshot of a link at the top of a Browser window

Then follow the steps below:

  1. Navigate to your module page in Moodle and go to the area of the module where you want to add this video. Ensure you have turned editing on (click the cog at the top right of the course page).
  2. Select ‘ + Add an activity or resource‘. In the page that opens scroll down and find ‘URL‘. Click ‘Add
  3. In the page that opens (Fig 2) give the link a Name – this could be the same as the video title, or different.
  4. In the ‘External URL‘ field paste the link you have copied from your browser.
  5. Click ‘Save and return to course‘ to view.
Screenshot of 'Add a new URL' activity in Moodle
Figure 2 – screenshot of ‘Add a new URL’ activity in Moodle

Advanced settings:

Appearance – this section will let you choose how the link opens. You will see the following options:

  • Automatic – Make the best guess at what should happen (probably what is wanted 99% of the time).
  • Embed – will (attempt to) display the video directly in the page (good for images, flash animations, videos and PDFs).
  • Open – will open just show the video in the web browser (takes user to the link in the same browser page, taking them out of Moodle)
  • In pop-up (our favourite option) – Same as ‘Open’, but opens a new browser window to show this file, therefore keeping Moodle page open in the background.

The more complicated way, but with ‘prettier’ results

Embed HTML

I assure you, this isn’t that much harder to do, but may seem daunting because of all the technical terms. If you just follow the step by step instructions you will get great results with little effort. Don’t be afraid to try embedding HTML code into your course.

Vaiva Adamonyte, Learning Technologist at LIPA

Embedding HTML code may sound complicated if you have never dealt with any type of code, but once you know what to look for and what you are doing it will seem easy enough. And will make you look like a computer wiz!

First of all you need to find the video. For this example we will go back to YouTube for the same video we used earlier. Many video platforms these days (including YouTube, Vimeo and Panopto) will offer different methods for sharing content (embed is usually one of them). To begin, click on the ‘SHARE‘ button below the video and select Embed (usually shown with an ‘<>’ icon)

Copy the text in the field, it will look something like this:

Example of HTML code available in 'Share' menu for the video needed to embed the video to another web page such as Moodle
Figure 3 – Example of HTML code available in ‘Share’ menu for the video needed to embed the video to another web page such as Moodle

If you look closely you will see that the link to the video is nested within the code.

Next, you want to paste that bit of code into Moodle for the magic to happen.

  1. Navigate to your module page in Moodle and go to the area of the module where you want to add this video. Ensure you have turned editing on (click the cog at the top right of the course page).
  2. Select ‘ + Add an activity or resource‘. In the page that opens scroll down and find ‘Page‘. Click ‘Add
  3. In the page that opens give the link a Name – this could be the same as the video title, or different.
  4. In the ‘Content‘ area, find the </> button (Fig 4) in the ribbon and click to open the ‘code view’. This is where you need to paste the HTML code you copied from YouTube.
    • If you see any other characters in the field already (you may see <p><br></p> in the box) you can remove them (select all and delete).
  5. (Optional) If you want the embedded video to appear on the main course page you will need to do the following:
    1. Go to description field below the Name and click on the </> button (Fig 4) to paste the HTML code as you did earlier.
    2. Tick the box ‘Display description on course page’.
  6. Click ‘Save and return to course‘ to view.
Screenshot of Moodle page content editing area with HTML code view enabled
Figure 4 – Screenshot of Moodle page content editing area with HTML code view enabled

If you choose to embed the video to appear on your main page the content will look something like this (Fig 5):

Figure 5 – Screenshot of Moodle page with an embedded video

You can also use embed codes from sources other than YouTube. You will often find ’embed HTML’ function in sharing settings for many publicly hosted videos.

If you have any questions or need any additional guidance please get in touch with us at TEL@groups.lipa.ac.uk

Adapted from: https://docs.moodle.org/25/en/File_resource_settings

Last reviewed: 20/12/2019

You may also like...