---
title: "Create a video header background"
slug: "create-a-video-header-background"
abstract: "Use Scriban to add a video to a header."
---
# Create a video header background

SXA is a flexible tool and there are different ways to add a video as a header background. This topic describes how to use Scriban to add a video hero banner.

To add a video to the header:

1. Open your site's page template, and on the **Builder** tab, add a new field.
2. Name the field *Video* and select type **File**.

    ![Add the video field to the page template](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/SXA-Video-hero-template-extension.png)

3. Now on the page, in the **Content** section, in the **Video** field, select the video file from the Media Library.

    ![Add the video to the page](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/SXA-Video-hero-select-on-page.png)

    > [!note]
    > Use a video format that your preferred browser supports.

4. In this example, we use the Page Content component to add a video to the page header:

    In the Content Editor, navigate to *Presentation/Rendering Variants*, right-click **Page Content**, and click **Insert**, **Variant Definition**.

5. Enter a name, for example, *Page header*, and click **OK**. For header text, for example, add a title, subtitle, and breadcrumb.

    ![Page header rendering variant](https://doc.sitecore.com/api/markdown-image/xp/en/developers/sxa/105/sitecore-experience-accelerator/images/SXA-Video-hero-rendering-variant.png)

6. Right-click the rendering variant that you just created, click **Section**, enter a name (*Header video*) and click **Ok**.
7. Right-click the **Section** item that you just added, click **Scriban**, and click **OK**.
8. In the **VariantDetails** section, in the **Template** field, add HTML to play the video. For example:

    ```xml
    <video autoplay muted loop class="video-background">
      <source src="{{ i_item.video.target.media_url }}" type="video/mp4">
    </video>
    ```

9. Add the following code to your theme CSS:

    ```csharp
    .video-background {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
    }
    ```

10. In the Experience Editor, add the Page Content component to the header, and select the Page header variant. The video now displays in the background.