---
title: "Add a video"
slug: "add-a-video"
abstract: "Learn how to add a video to your SXA pages."
---
# Add a video

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.

<details>
<summary><h2>Add MP4, ogg, WebM, or YouTube videos</h2></summary>

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.<br><br>> [!note]<br>> Videos from YouTube cannot auto-play on mobile devices because of YouTube's poster image functionality. |

</details>

<details>
<summary><h2>Add a video from a provider</h2></summary>

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 ![SXA-Gallery-Insertnewitem.png](https://doc.sitecore.com/api/markdown-image/xp/en/users/sxa/102/sitecore-experience-accelerator/images/SXA-Gallery-Insertnewitem.png)**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`.

</details>

<details>
<summary><h2>Use the Plain HTML component to add a video</h2></summary>

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.

</details>