Add a video

Current version: 10.4

There are different ways to add videos to your pages. This topic describes how to add videos from the Media Library and videos from other providers.

Add MP4, ogg, WebM, or YouTube videos

The default SXA video component embeds a player for watching MP4, ogg, or WebM videos stored in the Media Library or hosted directly on a web server. Alternatively, it lets you specify a YouTube video ID.

To add a video:

  1. Open the Toolbox. In the Media group, click the Video component and drag it to the page.

  2. In the Select the Associated Content dialog box, click Create.

  3. In the Insert item dialog box, click Video and click Ok.

  4. Click the component on the page, and on the Video toolbar, click Edit video properties.

    The following table describes the fields that you can specify to configure how a video appears on your page:

    Field

    Description

    YouTube Video ID

    Add the unique ID of the YouTube video. YouTube videos have priority over hosted videos.

    Poster Image

    Add the image to display before the video is started.

    Label

    Add the title to use during tracking.

    Length

    Specify the time to track video in seconds. This parameter is useful when there is a high probability that the movie will not be watched to the very end. For example, because of ending titles.

    Movie in mp4 format

    Add the video in mp4 format.

    Movie in WebM format

    Add the video in WebM format.

    Movie in ogg format

    Add the video in ogg format.

    Image displayed when video is unavailable

    Add the image that displays when visitors cannot play the video.

    Text displayed when video is unavailable

    Add the error message that displays when visitors cannot play the video.

    Autoplay

    Select to start videos automatically.

    Note

    Videos from YouTube cannot auto-play on mobile devices because of YouTube's poster image functionality.

Add a video from a provider

There are several ways to add videos from other providers. For example, this procedure describes one of the ways to add a Vimeo video.

To add a Vimeo video using the Gallery component:

  1. Open the Toolbox. In the Media group, click Gallery and drag it to the page.

  2. Click Save.

  3. On the Gallery toolbar, click Insert a new item.

  4. In the Insert item dialog window, click Gallery video, enter a name, and click OK.

  5. In the Gallery video toolbar, click Edit Gallery video properties.

  6. Fill in the following fields:

    Field

    Description

    Provider

    Select the video provider. Options are: YouTube, DailyMotion, and Vimeo

    Video ID

    Enter the video ID or URL.

    Title

    Enter a title for the video.

    Description

    Enter a description for the video.

    Custom local thumbnail

    Add a thumbnail for the video. If not specified, the thumbnail is taken from the video provider.

Note

Vimeo only supports direct links to public videos. You can use the formats https://player.vimeo.com/video/<ID> and https://vimeo.com/<ID>.

Tip

For YouTube videos, you can add closed captioning by configuring the component-video.js file in /sitecore/media library/Base Themes/Components Theme/Scripts/component-video. Under the YouTube property, right after imageQuality, add cc_load_policy: 1.

Use the Plain HTML component to add a video

To add a video using the Plain HTML component:

  1. Open the Toolbox. In the Page Content group, click Plain HTML and drag it to the page.

  2. Click Save.

  3. On the Plain HTML toolbar, click Edit HTML source in the Content Editor.

  4. Your HTML Code item now opens in the Content Editor. In the HTML section, in the Code field, enter the HTML code provided by the service provider.

Do you have some feedback for us?

If you have suggestions for improving this article,