ビデオヘッダーの背景を作成してください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAは柔軟なツールで、動画をヘッダー背景として追加する方法はいくつかあります。このトピックでは、Scribanを使ってビデオヒーローバナーを追加する方法を説明します。
ヘッダーに動画を追加するには:
-
サイトのページテンプレートを開き、ビルダー タブで新しいフィールドを追加してください。
-
フィールド名をVideoし、タイプ ファイルを選択します。
-
ページ内の コンテンツ セクションの ビデオ 欄で、メディアライブラリからビデオファイルを選択します。
!注お好みのブラウザが対応する動画フォーマットを使用してください。
-
この例では、ページコンテンツコンポーネントを使ってページヘッダーに動画を追加します:
コンテンツエディターでPresentation/Rendering Variantsに移動し、右クリックで 「ページコンテンツ」をクリックし、「 挿入」→ 「バリアント定義」をクリックします。
-
例えば、名前を入力して、Page header 、をクリックします。例えばヘッダーテキストの場合は、タイトル、サブタイトル、パンくずを追加します。
-
作成したレンダリングバリアントを右クリックし、「 セクション」をクリックし、名前(Header video)を入力して **「OK」**をクリックします。
-
追加した セクション 項目を右クリックし、「 Scriban」をクリックして **「OK」**をクリックします。
-
VariantDetailsセクションのテンプレート欄で、動画再生用のHTMLを追加してください。例えば:
-
テーマCSSに以下のコードを追加してください:
.video-background { position: absolute; top: 0; left: 0; min-width: 100%; }
-
エクスペリエンスエディターで、ヘッダーにページコンテンツコンポーネントを追加し、ページヘッダーのバリアントを選択します。動画はバックグラウンドに表示されます。