HTML Editor: Add MultiMedia

1. About: Multimedia Tools

If you embed media, it will appear/play within D2L, rather than link students out to Panopto, YouTube or other such website.

toolbar with media tools circled



2. Add: General Media

The Insert Stuff button allows you to embed multi-media, from Panopto lectures to YouTube videos, Flickr images, or recordings you do right from your computer. Here's what a video would look like in D2L:

example of a video embedded into an HTML page


Note: To use the new D2L Audio-Video Player and Editor to upload video and for more information about the advanced editing capabilities, including auto-generated captions, see Sections 2 and 3 on the Add Multimedia Help Page.

  1. Click the Insert Stuff button.insert stuff button in toolbar


  2. Tell D2L where the media is located, by clicking on an item in the menu.insert stuff media


  3. Depending upon your selection in step 2, you will be instructed what to do next.

    Note: If you would like specific help on embedding Panopto videos, visit our Panopto help page.

  4. When you have located the content you wish to embed, click the Insert button.insert button

    Note: Due to security measures, D2L will only allow you to embed from a secure source. For example, D2L accepts URLs starting with HTTPS (which signals to your browser to use special encryption), but may not allow you to embed a URL starting with HTTP.

  5. Click Publish (or Save) to make the content available to learners, or Save as Draft to save your unpublished work. (Note: the buttons change depending upon the tool you are using.)Publish button



3. Add: Video Note

Use the Insert Stuff button to insert video notes into your course.

  1. In the html editor, click on the Insert Stuff icon.insert stuff button in toolbar
  2. Click on the Video Note option.screen shot of insert stuff options with Video Note circled 
  3. Allow your browser to access your webcam and microphonescreenshot of browser requested access to camera and microphone with Allow circled


  4. Click on the New Recording button to start recording.  If you don't see the New Recording button, it is because the window is too small.  Enlarge the window by dragging the lower right corner down and to the right.image of video note window with new recording


    Note: On a mobile device, click on the Choose File option and then select take Take Video.

    screen shot of mobile device with the Choose File button cirecled and the Take Video option circled
  5. Record your video note (maximum 30 minutes).  Click Stop Recording when you are finished.image of videonote recording window with the stop recording button circled 
    • You can preview the video by clicking on the play button. Re-record by clicking on the New Recording button again.
  6. When you are satisfied with the video, click on the Next button.

    Image of video note recorder with the next button circled


  7. Enter the Title and Description of your video. This is important if there are visually impaired students in the class.Title and Description Fields

    Note: A screen reader will read the title and description of the video note. 

  8. Change the Audio Language to the language you spoke when you recorded your Video Note.Audio Language menu


  9. Select Automatically generate captions from audio.check box
  10. Click on the Next button.image of Title and Description screen with Next circled 
  11. You may see a message that the video is processing; it is not necessary to wait for the video to render. You can finish by clicking the Insert button.image ofcircled  insert button at the bottom of the video render screen


  12. You be returned to the html editor, where you will see your video (or the processing message). Click the Save button.
  13. Click the Admin Tools icon.Admin Tools icon


  14. Select Video Note Captions.Video Note captions option circled in menu


  15. Click on the Video Note to open it.VideoNote list


  16. Click the Play button to listen to the recording.Play button


  17. Make changes to the caption text as needed.text field


  18. Click Save Captions.Save Captions button



4. Add: An Image

When you use the Insert Image tool, you literally insert a picture into your text.

Note: Resizing an image within the HTML editor does not reduce the actual file size. Large files will still take longer to load, even if they appear smaller. It is preferable that you resize an image before uploading to D2L using a program such as Microsoft Paint or Adobe Photoshop.

  1. Click on the Insert Image button.insert image button


  2. Click My Computer to upload a file from your computer or computer option 

    Note: You can also link to an image on the web. To get the URL, right click on the image and select copy link.

  3. Drag and drop your image into the window or click Upload to locate the image on you computer or device.upload button


  4. Click the Add button.add button


  5. In the Provide Alternative Text box:alt text pop up window
    • Select This image is decorative, or
    • In the Alternative Text box, enter descriptive text for use by participants with visual impairments 
    • Click Add.

      Note: Do not skip this step. This is what makes your images accessible to people with visual impairments who use assistive technology. Visit the WebAIM website for tips on using Alternative Text.

  6. To edit your image, click directly on it. This makes a new toolbar available to you. With this toolbar, you can (from right to left in the order that the tools appear):toolbar
    • Rotate the image counterclockwise
    • Rotate the image clockwise
    • Flip the image vertically
    • Flip the image horizontally
    • Open the Image Editor with which you can make other changes like cropping, resizing, or adjusting the color
  7. Click Publish (or Save) to make the content available to learners, or Save as Draft to save your unpublished work. (Note: the buttons change depending upon the tool you are using.)Publish button

5. Add: A Link

Use the Insert Quicklink button to embed a link to a website or to other course content.

  1. Highlight the text, image, symbol or other content that you wish to turn into a link.
  2. Click on the Insert Quicklink icon.insert quick link button


  3. Click on the item to which you want to


  4. Follow the prompts; they will be different for each tool.
  5. To link to a website:
    • In the URL box, paste or type the link.URL field


    • In the Title box, include a description of the link.title field

      Note: To make your content as accessible as possible, use meaningful text in the title box. Phrases such as "Read More" that are out of context can be ambiguous. For tips on creating meaningful link text, click here to open the WebAIM page on Links and Hypertext in a new window.

    • Choose one of the following as your Target. The "target" tells D2L where to open the radio dials
      • Whole Window: opens the page full-screen (students will have to use the "back" button to navigate back to D2L)
      • Same Frame: opens the page, but it appears within the D2L "window" (students can still use the D2L navigation buttons, but the webpage appears in place of the D2L content)
      • New Window: opens the page full-screen, but in a new tab (this allows students to have D2L and the new page open at the same time)
  6. Click the Insert button.insert button


  7. Click Publish (or Save) to make the content available to learners, or Save as Draft to save your unpublished work. (Note: the buttons change depending upon the tool you are using.)
    Publish button

Back to Top