ビデオヘッダーの背景を作成する

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

ヘッダーにビデオを追加するには:

サイトのページテンプレートを開き、Builderタブで新しいフィールドを追加します。
フィールドに「 Video 」という名前を付け、「 File」と入力します。
ページのContentセクションのVideoフィールドで、メディアライブラリからビデオファイルを選択します。

メモ

お好みのブラウザがサポートするビデオ形式を使用してください。
この例では、ページコンテンツコンポーネントを使用して、ページヘッダーにビデオを追加します。

コンテンツエディタでPresentation/Rendering Variantsに移動し、Page Contentを右クリックして、Insert 、Variant Definitionの順にクリックします。
名前( Page headerなど)を入力し、OKをクリックします。たとえば、ヘッダーテキストの場合は、タイトル、サブタイトル、パンくずリストを追加します。
作成したレンダリングバリアントを右クリックし、「 Section」をクリックし、名前(Header video)を入力して「 Ok」をクリックします。
追加したSectionアイテムを右クリックし、Scribanをクリックして、OKをクリックします。

VariantDetailsセクションのTemplateフィールドに、ビデオを再生するHTMLを追加します。例えば：

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

テーマCSSに次のコードを追加します。

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

エクスペリエンスエディターで、ヘッダーにページコンテンツコンポーネントを追加し、ページヘッダーバリアントを選択します。ビデオがバックグラウンドに表示されるようになりました。

この記事を改善するための提案がある場合は、お知らせください!

ビデオ ヘッダーの背景を作成する