HTML Editor Add Media

What are HTML Multimedia Tools?

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

Add General Media with Insert Stuff

The Insert Stuff button allows you to embed multimedia, from Panopto lectures to YouTube videos, Flickr images, or recordings you make right from your computer. 

Step 1

Select the Insert Stuff button.

Step 2

Select a location where the media is stored in the Insert Stuff menu (e.g., My Computer, Panopto, etc.).

Step 3

Depending on your selection in Step 2, you will be instructed on what to do next.

Step 4

When you have located and selected the content you wish to embed, select the Insert button.

Step 5

Select Publish (or Save) to make the content available to learners, or Save as Draft to save your unpublished work. 

Back to Top

Add Video or Audio Notes

Use the Insert Stuff button to insert Video and/or Audio Notes into your course.

Step 1

In the HTML editor, select the Insert Stuff icon.

Step 2

Select Add Video Note. 

Step 3

Make sure your browser can access your webcam and microphone.

Step 4

Select 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.

Step 5

Record your Video or Audio Note (maximum 30 minutes). Select Stop Recording when you are finished. 

Step 6

Preview the recording by selecting the play icon. Re-record by selecting the New Recording button again.

Step 7

When you are satisfied with the recording, select the Next button.

Step 8

Enter the Title and Description of your video. This is important for accessibility, because a screen reader will read the title and description of the Note.

Step 9

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

Step 10

Under the Audio Language, select Automatically generate captions from audio.

Step 11

Select Next. 

Step 12

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 selecting the Insert button.

Step 13

You will be returned to the HTML editor, where you will see your video (or the processing message). Select Save.

Step 14

Select the Admin Tools icon.

Step 15

Select Audio/Video Note Editor.

Step 16

Select the Video or Audio Note to open it.

Step 17

Select the Play button to listen to the recording.

Step 18

Select Close Captions and make changes to the caption text as needed.

Step 19

Select Save Captions.

Back to Top

Add an Image

Step 1

Select the Insert Image button.

Step 2

Select My Computer to upload a file from your computer or device. 

Step 3

Drag and drop your image into the window or select Upload to locate the image on your computer or device.

Step 4

Select the Add button.

Step 5

In the Provide Alternative Text box choose one of the following two options:

• Select This image is decorative
• In the Alternative Text box, enter descriptive text for use by participants with visual impairments

Step 6

Select the Add button.

Step 7

To edit your image, select it. A new toolbar will appear. With this toolbar, you can (from right to left in the order that the tools appear):

• Rotate the image counterclockwise
• Rotate the image clockwise
• Flip the image vertically
• Flip the image horizontally
• Open the Image Editor, from which you can make other changes like cropping, resizing, or adjusting the color

Step 8

Select Publish (or Save) to make the content available to learners, or Save as Draft to save your unpublished work.

Back to Top

Embed a Link with Quicklink

Use the Insert Quicklink button to embed links to course material.  

Step 1

Highlight the text, image, or symbol on the page that you want to turn into a link.

Step 2

Select the Insert Quicklink icon.

Step 3

Select the tool where the item you wish to link is located.

Step 4

Follow the prompts specific to the tool which you selected.

Back to Top

Link to an External Website with Quicklink

Use the Insert Quicklink button to link to an external website.

Step 1

In the Link field, paste or type the link to the URL you wish to link to.

Step 2

In the Text box, include a description of the link that will be the text the user selects to go there.

Step 3

Select one of the following options for Open in:

• New Window: (Recommended) opens the page full-screen but in a new tab, allowing students to have D2L and the new page open simultaneously.
• Current Window: (Not recommended) opens the page within the D2L window (students can still use the D2L navigation buttons, but the webpage appears in place of the D2L content).

Step 4

Select the Insert button.

Step 5

Depending on the tool you are using, select Publish (or Save) to make the content available to learners or Save as Draft to save your unpublished work.

Step 6

To preview, edit, or break the link while in HTML Editor, select the link to pull up the quick edit menu

Back to Top

Add Code Snippets

Insert snippets of code into any HTML page you build in D2L.

Step 1

Select the Insert Other Options icon (looks like a plus sign).

Step 2

Select Insert Code from the menu.

Step 3

Select your coding language.

Step 4

Enter the snippet of code

Step 5

Select the checkmark to save.

Back to Top