Create a video header background

Abstract

Use Scriban to add a video to a header.

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
  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

    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
  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:

    <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:

    .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.