Create a video header background

Open your site's page template, and on the Builder tab, add a new field.

Name the field Video and select type File.

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

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.

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

Right-click the rendering variant that you just created, click Section, enter a name (Header video) and click Ok.

Right-click the Section item that you just added, click Scriban, and click OK.

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>

Add the following code to your theme CSS:

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

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.