Video Stream Component

The Video Stream component is an interactive presentation component that displays streaming video from a video service outside of Evolve to the learner. The Video Stream component can be set as a Left, Full-width or Right component in your Evolve course.

This article provides an overview of the Video Stream component, component setup and behavior, and examples of Video Stream component configurations.

Component overview

The Video Stream component presents a streaming video to learners. It is possible to set the Video Stream to Auto play when the Video component appears on a page in an Evolve course. Possible configurations for the Video Stream component depend on the video service for the Video Stream.

The Video Stream component is fully responsive.

Component set up

Follow these steps to add the Video Stream component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Video Stream component.
3. Click the Video Stream component and select Add Left, Add Full or Add Right .

Click the Edit Component icon on the newly added Video Stream component to begin set up.

General section

In the General section:

Add Video Stream Title, or a Video Stream Display Title, as needed. Video Display Title is seen by learners.

Scroll down and add your Video Stream Body. Use the text editor to style and format your text, as needed.

1. Add Video Stream Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Video Stream component that can display an icon and label prior to the Video Stream component completion, which changes to a different icon and label once the Video Stream component is completed.

Video Player section

In the Video Player section, you set configuration for the Video Stream depending on what Video player service is used for the video.

Heads up!

In Player Help in the Video Player section you get information about where to find the Video Embed code for the selected Video player service.

For Video Streams using YouTube:

1. Select Youtube in the Video player service drop-down list.
2. Enter Video Embed Code for your YouTube video.
3. Enter number of seconds from the beginning the Video Starts At.
4. Set Interface Language.
5. Set the Default Caption Language.

1. Toggle to set the video to Auto play.
2. Toggle to Loop video.
3. Toggle Disable keyboard control, as needed.
4. Toggle to select Modest Branding.
5. Toggle to Show closed captions.
6. Allow full screen is enabled by default for the Video Stream component using YouTube as a video service.
7. Toggle to Use light theme for player.

Heads up!

Enabling Modest Branding will have no effect if the light theme is enabled for the player.

For Video Streams using Vimeo:

1. Select Vimeo in the Video player service drop-down list.
2. Enter Video Embed Code for your Vimeo video.
3. Allow full screen is enabled by default for the Video Stream component using Vimeo as video service.

For Video Streams using Brightcove:

1. Select Brightcove in the Video player service drop-down list.
2. Enter Video Embed Code for your Brightcove video.
3. Toggle to set the video to Auto play.
4. Toggle to Loop video.

For Video Streams using Wistia:

1. Select Wistia in the Video player service drop-down list.
2. Enter Video Embed Code for your Wistia video.
3. Toggle Use Wistia Customization Options, as needed. Enabling this option overrides the customization options for the video set through the Wistia website.

For Video Streams using Vidyard:

1. Select Vidyard in the Video player service drop-down list.
2. Enter Video Embed Code for your Vidyard video.

Behaviour section

In the Behaviour section, select Set completion status on to one of the options in the drop-down list: Inview, Play or Ended. This setting is set to Inview for all Streaming Videos by default.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.