Embed YouTube Videos that Bookmark and Unlock the Next Button

NOTE: Programming changes made through JavaScript and CSS are not supported by the dominKnow support team.

Adding YouTube videos is easy enough to do, but sometimes you want to exert some additional control over the videos. Using dominKnw | ONE's content API, YouTube's API, and variables, you can create an HTML widget that can provide bookmarking, enable the next button and more.

A Customer Contribution

One of our customers, Joel Ayoub with Certus did just that and was kind enough to share his work with the dominKnow | ONE Community.

On a related note, if your organization utilizes off-the-shelf content libraries, then be sure and take a look at Certus. Certus brands unleash potential through a shared vision to help learners achieve new possibilities. Their diverse catalog delivers training for technical skills, workplace safety, driver safety, professional services and continuing education.

YouTube API Widget Functionality

This YouTube Widget provides the following functionality. This functionality is built directly into the widget and only requires you configure it for your specific needs.

Bookmarking: The widget will bookmark the last place of the video, so learners can return to where they left off after exiting and re-entering the course. [configurable]
Start Time: You can set the video to start at a specific time or have it start at the beginning. [configurable]
End Time: You can set the video to end at a specific time or end when the video has reached the actual end time. [configurable]
Autoplay: You can set the video to start automatically when the page loads, or start when the learner presses play. [configurable]
Use the same HTML widget for multiple videos: HTML widgets in dominKnow | ONE are reusable. Once you load the widget, you can reuse it across multiple pages and courses and configure it for the video you want to display on a given page. [configurable]
Use the same Video multiple times in a project: You can configure multiple instances of the widget within the same course to load the same video and have different bookmarking sets for each instance. [configurable]
Custom player and pause buttons: The buttons for playing, pausing, and restarting the video are customized to use your Theme colors. [default]
Seek bar: You can set the seek bar to be selectable to move forward or backward in the video during playback, set the seek bar to not be interactive until the video has completed one time, or set the seekbar to never be selectable. [configurable]
Enable next button: You can set the video to enable the next button in the Player Controls once the video is finished. [configurable]
Enable Closed Captions: If you have added Closed Captions to your YouTube Video, you can set the closed captions to be on or off. [configurable]

NOTE: With the source code, you can choose to modify as needed.

How to Download and Add the YouTube API Widget to your dominKnow | ONE instance

Steps:

Access and download the YouTube HTML Widget.
Log in to your dominKnow | ONE site.
Select Library -> Upload -> Select Project / Company -> Next -> HTML Widget
1. Select the HTML Widget and upload it to your site
2. NOTE: If you want to make this available for your entire organization, select Company. Authors will be able to use it and configure it for their individual needs, but not make any changes unless they have been given permission to manage the Company folder/filter.
Set the following properties after uploading the HTML widget:
1. Name: Provide a name that is easily recognizable by your team.
2. Description: Add the folllowing
  VideoID: ABC123xyz
  WidgetID:
  StartAt: 0
  EndAt:
  Mode: 1
  AutoPlay: no
3. Width: Set your preferred width for videos
4. Height: Set your preferred height for videos
5. Border: Off
6. Scrolling: Auto
Select Save

New to HTML Widgets or the Library?

Adding a Bookmark Project Variable

The project will need a variable that will be used to store bookmarking information for the embedded videos in your project.

Steps

Add a Project Variable to your project. Select Home -> Manage Variables (Note: If Ribbon Bar is off, toggle it on in the upper right corner.)
Select Add Project Variable and set it using the following criteria.
1. Name: Youtube_Bookmarking
  1. *** Exact name is required
2. Description: In this field add something that will help you and your team remember what the variable is used for.
3. Type: Change to String.
4. Initial Value: Leave this blank

Once the variable is added, the video will automatically bookmark. No additional steps are needed.

Using the YouTube HTML Widget in your Project

Steps

Access the page you want to add your YouTube video.
Follow the steps here on Adding HTML Widgets to Your Page
Double-click on the embedded video.
In the right flyout under Details -> Description, you will find a copy of the default settings you put into the previous description. Changing the information here will change this instance of the widget. The widget automatically reads the information in this field in the order and format of the sample.
Adjust the Description information for your use case. The following are the minimum changes:
1. VideoID: Replace ABC123xyz with the video ID of the desired.
  1. e.g., URL of a YouTube Video: https://www.youtube.com/watch?v=Rx_SMeyJWco&list=RDRx_SMeyJWco&start_radio=1
    1. The id for this video is: Rx_SMeyJWco
2. WidgetID: You can leave this blank in most cases. See Using the Same Video Multiple Times in a Project for when this will be used.
3. StartAt: 0
  1. The default will start the project at the start of the video. If you wish to start it at a different starting point, replace 0 with the seconds value of your new start point.
    1. e.g., if I wanted to start the video at one minute and thirty seconds into the video, I would change 0 to 90.
4. EndAt:
  1. The default is to end when the video is over. If you want the video to stop before the end of the video, put the desired endpoint in seconds.
    1. e.g., if I wanted it to stop at the two-minute mark, I would change blank to 120.
5. Mode: 1
  1. The Mode options determine if and when the learner can interact with the seek bar, jumping the video forward or backward. You can choose from a value of 1, 2, or 3.
    1. Mode: 1 - This mode will not allow the learner to interact with the seek bar until they have watched the video in full one time. Once the learner has watched the video, they can then use the seek bar to move forward or backward in the video.
    2. Mode: 2 - This mode will not allow the learner to interact with the seek bar at any time. The seek bar only provides a visual representation.
    3. Mode: 3 - This mode will allow the learner to interact with the seek bar at any time.
6. AutoPlay: no
  1. You can set this option to yes or no. If set to yes, the video will immediately play once the page and video are loaded.

Blocking a Learner from Advancing to the Next Page

In some cases, you may wish to prevent a learner from moving forward until they have finished watching the video. The YouTube HTML widget has been designed to automatically enable the Next Button in the standard navigation controls for dominKnow | ONE Themes. To take advantage of this functionality, you need only disable the next navigation on the page with the video.

Steps

Select the Interact Ribbon Tab.
Select Disable Next.

Now, when the learner views the page, the next button will be disabled until the end of the video has been reached.

Using a Video in Multiple Locations in a Project

For the use case where you have a single video and you want to use a segment of it in one video and then use the same video, but with a different segment, the HTML widget will require you utilize the WidgetID setting.

In most cases, the WidgetID will be left blank. However, in the above scenario, you will need to change the WidgetID from blank to a unique value for each instance of the Video. The value for WidgetID can be any string with no spaces.

In the following example, the author is showing the first part of a dance video in the first instance and then showing a different segment for the second video. The configuration details would look something like this:

Video Segment One

VideoID: dMH0bHeiRNg
WidgetID: dance-intro
StartAt: 0
EndAt: 120
Mode: 1
AutoPlay: no

Video Segment Two

VideoID: dMH0bHeiRNg
WidgetID: dance-main
StartAt: 120
EndAt: 240
Mode: 1
AutoPlay: no