Menu Close

Embedding Video into HTML

​Overview

Within D2L Brightspace, an HTML page is created when you select Create a File.  This is a good way to provide some text, images, and/or videos all on one page.  To embed a video into an HTML page, navigate to the instructions for method you are using below:

  • My Computer – A file stored on your computer or shared/external drive.
  • Media Library – D2L Brightspace’s integrated media streaming and editing tool.
  • YouTube – Built-in YouTube search.
  • Insert Link – Insert a link to a video located on another site.
  • Embed Code – Insert a video using embed code.

The end result of embedding a video within an HTML page will look something like this…

Web content page on D2L Brightspace showing a set of "lorem ipsum" text. Between the paragraphs of text is an embedded video from Youtube called "How to: Measure Blood Pressure".

Instructions

Step 1. First navigate to the module where you would like the page to reside and click New, then Create a File. 

Note: If you have an existing page, select Edit HTML from the topic’s drop-down menu.

Content tool in D2L Brightspace with two buttons labeled "Upload / Create" and "Existing Activities". The dropdown menu associated with "Upload / Create is expanded out and there is a red box around the "Create a File" option in the dropdown menu.

Step 2. Give your file a Title and select the Insert Stuff option.

Please Note: For best results please make sure all videos files are in .mp4 format and that all audio files are in .mp3 format. If you have any questions or need any help converting your file please contact the Institute Help Desk.

Page titled "Create a File in 'Module 3'" showing a text field for title and a large content editor. In the content editor's toolbar, there is a red box around an icon composed of play button, pause button, record button, and stop button icons. At the bottom of the page are buttons for "Save and Close", "Save", and "Cancel".

Step 3. In the Insert Stuff pop-up window, select the source of the video that you want to embed into the page.

  1. My Computer
  2. Media Library
  3. Youtube
  4. Insert Link
  5. Enter Embed Code

Labeled screenshot of the "Insert Stuff" pop-up window, highlighting the options of 1. My Computer, 2. Media Library, 3. Youtube, 4. Insert Link, and 5. Enter Embed Code. There is a button labeled "Cancel" at the bottom of the window.

To insert a file you have stored on your computer…

  1. Select My Computer from the menu list on the left.
  2. Click Browse and select the file then click Open.
  3. Click Upload.

insert stuff screenshot 2

Add Link Text and Alternative Text.
Click Insert.

insert stuff screenshot 3

To Insert a YouTube Video…

  1. Click YouTube.
  2. Enter in your search in the Search YouTube field.
  3. Click Search.
  4. Click once on the video you would like to insert.
  5. Click Next.

insert stuff youtube 2

Click Insert found in the lower left-hand corner.

insert stuff screenshot youtube 3

To Insert a Video using a Link…

Some videos found online will allow you to share the video by a specific URL, or link.  If your video has this option, you can use Insert Link.

  1. Click Insert Link
  2. Enter or paste in the link
  3. Click Next

Click Insert found in the lower left-hand corner.

insert stuff screenshot link 2

To Insert a Video using the Embed Code…

  1. Click Enter Embed Code.
  2. Paste the embed code.  Embed code is usually going to be on the longer side, so you’ll most likely be copying the code from the video site and pasting it here.
  3. Click Next.

insert stuff embed code 2

Click Insert found in the lower left-hand corner.

​insert stuff embed code 3