---
title: "ビデオヘッダーの背景を作成してください"
slug: "create-a-video-header-background"
abstract: "Scribanを使って動画をヘッダーに追加してください。"
---
# ビデオヘッダーの背景を作成してください

SXAは柔軟なツールで、動画をヘッダー背景として追加する方法はいくつかあります。このトピックでは、Scribanを使ってビデオヒーローバナーを追加する方法を説明します。

ヘッダーに動画を追加するには:

1.  サイトのページテンプレートを開き、**ビルダー** タブで新しいフィールドを追加してください。
    
2.  フィールド名を*Video*し、タイプ **ファイル**を選択します。
    
    ![Add the video field to the page template](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Video-hero-template-extension.png)
    
3.  ページ内の **コンテンツ** セクションの **ビデオ** 欄で、メディアライブラリからビデオファイルを選択します。
    
    ![Add the video to the page](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Video-hero-select-on-page.png)
    
    > !注お好みのブラウザが対応する動画フォーマットを使用してください。
    
4.  この例では、ページコンテンツコンポーネントを使ってページヘッダーに動画を追加します:
    
    コンテンツエディターで*Presentation/Rendering Variants*に移動し、右クリックで **「ページコンテンツ**」をクリックし、「 **挿入**」→ **「バリアント定義**」をクリックします。
    
5.  例えば、名前を入力して、***Page header*** 、をクリックします。例えばヘッダーテキストの場合は、タイトル、サブタイトル、パンくずを追加します。
    
    ![Page header rendering variant](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Video-hero-rendering-variant.png)
    
6.  作成したレンダリングバリアントを右クリックし、「 **セクション**」をクリックし、名前(*Header video*)を入力して **「OK」**をクリックします。
    
7.  追加した **セクション** 項目を右クリックし、「 **Scriban**」をクリックして **「OK」**をクリックします。
    
8.  **VariantDetails**セクションの**テンプレート**欄で、動画再生用のHTMLを追加してください。例えば:
    
    <video autoplay muted loop class="video-background">
     <source src="{{ i\_item.video.target.media\_url }}" type="video/mp4">
    </video>
    
9.  テーマCSSに以下のコードを追加してください:
    
    .video-background {
     position: absolute;
     top: 0;
     left: 0;
     min-width: 100%;
    }
    
10.  エクスペリエンスエディターで、ヘッダーにページコンテンツコンポーネントを追加し、ページヘッダーのバリアントを選択します。動画はバックグラウンドに表示されます。