Embed Part of a YouTube Video in Moodle

I love to be asked how to do something. Especially, when it is “how do you…in Moodle?”

Recently, I was asked by a teacher how to embed part of a video in Moodle. The teacher wants the students to watch a bit of the middle part of a video on YouTube. Hm. I know how to have the video start at a certain point. I’ve done that frequently.

To start a YouTube video at certain point, click on the Share button. There will be a “Start at” box toward the bottom of dialog box. *As a bonus, if you scroll or watch until the time that you want to start the video, that time will be the default in the “Start at” box.

But, what about only playing a portion of the video? What about starting in the middle and stopping before the end? YouTube does not offer an easy, official way of doing this. However, YouTube is scriptable. The nice people over at Digital Inspiration (written by Amit Agarwal) have a very nice write up with the code that you need.

<div data-video = "VIDEO_ID"  
         data-startseconds = "100"         
         data-endseconds = "200"    
         data-height = "480" 
         data-width = "640" 
         id = "youtube-player">
    </div> 
    
    <script src="https://www.youtube.com/iframe_api"></script>
    <script type="text/javascript">
      function onYouTubeIframeAPIReady() {
        var ctrlq = document.getElementById("youtube-player");
        var player = new YT.Player('youtube-player', {
          height: ctrlq.dataset.height,
          width: ctrlq.dataset.width,
          events: {
            'onReady': function(e) {
              e.target.cueVideoById({ 
                videoId: ctrlq.dataset.video,
                startSeconds: ctrlq.dataset.startseconds,
                endSeconds: ctrlq.dataset.endseconds
              });
            }
          } 
        }); 
      } 
    </script>
    

This code can be used in Moodle quite easily. Using the code above, you can put a video on a page in Moodle and have the only part of the video play. You can also put part of a video in Quiz question. I believe that you can place the video with the time restrictions anywhere that you have a “html” button in the Moodle editor. (I’ve confirmed the page and Quiz options.)

Here’s how to add the video on a page:

• Add a new page using the Add Resource or Activity and then choosing “Page”.
• Give the page a Name.
• In the Contents section, click the “Show/hide advanced buttons” button on the editor to display more editing options.
• Click the HTML button

• Paste the code from above

Now change the code to match what you want.

You really only need to change the top three lines:

• Copy and paste the last bit of the YouTube URL over the “Video_ID” (leave the quotation marks).
• Enter the starting point for the video in seconds (you may need to do a bit of math here).
• Enter the ending point (this is from the beginning of the video – again some math may be needed).

So let’s say that we wanted to focus on a part of the excellent video that Chris Kenniburg did. The whole URL for the video on YouTube is https://www.youtube.com/watch?v=u5W1RVU7DKE. We want to focus on the Tuck Everlasting part from 1:50 (one minute and fifty seconds – 110 seconds) until 2:20 (two minutes and twenty seconds- 140 seconds). I want to play these 30 seconds for the students.

<div data-video = “u5W1RVU7DKE”
data-startseconds = “110”
data-endseconds = “140”

Now I could scroll to the bottom and click “Save and display”. If you want to do a bit of additional editing, you could click the “HTML” button again and add text, images, etc. (*Note that in my testing, the video does NOT display in the visual editor, but setting the cursor shows a big spot. I would add my text above or below where the cursor is flashing by hitting return and then typing above.)

If you want to change the size of the video on the page, you could adjust the data height and data width to different numbers. (However, 480 by 640 is a very standard size for good reason).

data-height = “480”
data-width = “640”

That’s it. Copy and paste a chunk of code. Copy and paste part of a URL. Enter the time to start and stop. Done.

If you find this useful, please let me know.