Moodle Course Tip: How to add full-width responsive videos in Moodle Boost or Boost-based themes

Moodle’s core theme Boost is built on the latest Bootstrap 4 framework. If you are using Boost or a Boost-based theme (eg. Moove, Fordson) you can take advantage of the Bootstrap 4 “embed” utility to add responsive Youtube/Vimeo videos in your Moodle course.

In this tutorial we will show you how to do that.

Live Demo

(Our demo uses Maker theme which is our latest Boost-based Moodle theme.)

Step 1 – Get the Youtube/Vimeo video embed code

For Youtube video, you can follow the guide here

For Vimeo video, you can follow the guide here

Step 2 – Prepare the video code snippet for your Moodle course

Okay, so you’ve got your video embed code ready. To add the responsiveness to the video in your Moodle course, you need to wrap the embed code in Bootstrap’s utility code as shown below:

<div class="embed-responsive embed-responsive-16by9">

  <!-- Replace the iframe below with your video embed code -->
  <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>


Tip: You can change the video aspect ratio by replacing embed-responsive-16by9 with other modifier classes. You can find the list of classes on the Bootstrap 4 official docs here.

Step 3 – Add the video code snippet to your Moodle course

Log into your desired Moodle course as a teacher or admin. Turn editing on and add a “Label” using the “+ Add an activity or resource” link.

Copy and paste your prepared video code snippet from Step 2 into Label’s HTML code editor (as shown in the figure below).

Save your changes and you’ve successfully added a responsive video to your Moodle course.