サイトのコンテンツの背後で動画を自動的に再生させて、ダイナミックな視覚効果を作成します。

ページのセクションに背景動画をアップロードまたは埋め込んで、レイアウトに立体感を追加したり動画バナーを作成したりできます。

こちらもご覧ください: 背景画像または背景用アートを追加する。

ページ セクションの背景動画はバージョン7.1で利用可能です。サイトがバージョン7.0の場合は、一部のテンプレートでカバー ページやバナーに背景動画を追加できます。

背景動画の追加に関する動画

この動画では、背景動画を追加してカスタマイズする方法をご紹介します。

背景動画を追加する

ブロック セクション、ポートフォリオ セクション、自動レイアウトに背景動画を追加できます。背景動画には音声がなく、動画はループ再生されます。

背景動画を追加するには、次の手順に従ってください。

1. ページ パネルを開きます。
2. 動画を追加するページをクリックし、[編集] をクリックします。
3. セクションにカーソルを合わせ、[セクションを編集] をクリックします。
4. [背景] をクリックし、[動画] をクリックします。
5. [ファイルをアップロード] (60秒の制限あり)、[ライブラリーから選択]、[背景動画を閲覧]、または [リンクから追加] (YouTubeまたはVimeo) をクリックします。Vimeoでリンクから背景動画を追加するには、有料プランへの登録が必要です。背景動画に埋め込みコードを使用することはできません。
6. 動画を追加したら、背景の幅を [フルブリード] (動画がブラウザーの端に接する) または [はめ込み] (動画の周囲に単色の境界線が表示される) に設定します。[はめ込み] に設定されている場合、境界線の色を変更できます。
7. オプション: [フィルター] をクリックして、動画にオーバーレイするフィルターを追加します。フィルターはモバイル用代替画像にもオーバーレイ表示されます。
8. オプション: [再生速度] の横にある [+] または [-] をクリックして、再生速度を変更します。
9. オプション: モバイル用代替画像を追加します。
10. [保存] をクリックします。

モバイル用代替画像を追加する

接続速度とブラウザーのバージョンによっては、すべての訪問者に背景動画が読み込まれない場合があります。背景動画が読み込まれない場合や動画の読み込み中に、モバイル用代替画像が表示されるように設定できます。最良の結果を得るには、画像をアップロードする前にWeb表示用にフォーマットしてください。

モバイル用代替画像を追加するには、次の手順に従ってください。

1. ページ パネルを開きます。
2. 背景動画のあるページをクリックし、[編集] をクリックします。
3. セクションにカーソルを合わせ、[セクション編集] をクリックします。
4. [背景] をクリックし、[動画] をクリックします。
5. [モバイル用代替画像] で、[画像を追加] をクリックして画像をアップロードするか、ライブラリーから画像を再利用するか、ストック画像を追加します。
6. [保存] をクリックします。

モバイル用代替画像を追加しないとどうなりますか？

通常、モバイル用代替画像を追加しない場合は、代わりに背景色が表示されます。背景色はセクションのカラー テーマで設定できます。

背景動画は、デバイスがバッテリー残量低下モードまたは省電力モードのときは表示されません。モバイル用代替画像を追加していない場合、これらのデバイスでは動画のサムネイルと応答しない再生ボタンが表示されることがあります。

背景動画を削除する

背景動画は、置換、削除、または無効にすることができます。

背景動画を削除するには、次の手順に従います。

1. ページ パネルを開きます。
2. 削除する動画のあるページをクリックし、[編集] をクリックします。
3. セクションにカーソルを合わせ、[セクション編集] をクリックします。
4. [背景] をクリックし、目的に応じて以下をクリックします。
   • 別の動画を追加するには、[置き換え] をクリックします。
   • 背景から動画を削除するには、ゴミ箱アイコンをクリックします。これにより、ライブラリーから削除されることはありません。
   • 動画を削除せずに無効にするには、[画像] タブまたは [アート ] タブをクリックします。別の背景を追加することも、背景を空白のままにすることもできます。[動画] をクリックして戻ると、動画が再び表示されます。
5. 変更を加えたら、[保存] をクリックします。

背景動画のデザインのヒント

背景動画はサイトの視覚的な魅力を高める良い方法ですが、他のサイト コンテンツの邪魔にならないようにする必要があります。ここでは、背景動画を美しく見せるためのベスト プラクティスをいくつかご紹介します。背景動画をアップロードする場合は、動画の要件に従ってください。

動画ファイルを小さくする

サイズの大きな動画ファイルは読み込みに時間がかかり、訪問者の接続状況によっては動画が途中で一時停止することがあります。最良の結果を得られるように、以下の点にご注意ください。

• 動画の長さは40秒以内にしてください。
• 1080pの解像度と少なくとも3Mbpsのビットレートの動画を使用してください。
• 特に動画がスロー モーションで表示される場合は、フレーム レートが毎秒60フレームの動画を使用してください。

横長の縦横比を使用する

セクションの背景は、訪問者のブラウザーのウィンドウ サイズに基づいて自動的にサイズが変更されます。トリミングを最小限に抑えるには、横長の縦横比 (16:9など) の動画を使用してください。

スムーズなトランジションの動画を選ぶ

動画を撮影するときは、ショットの動きやショット内のオブジェクトの動きをなるべく抑えてください。背景動画は、多くの場合、動きが少ない方がより滑らかに見えます。

急速な切り替えや過度なパン、または1秒間に3回以上点滅するコンテンツを含む動画の使用は避けてください。このような特性は訪問者に不快感を与え、動画のアクセシビリティを低下させる可能性があります。

テキストとのコントラスト

サイトのアクセシビリティに確保するため、動画にオーバーレイするテキストには、動画の色とコントラストのある色を使用してください。たとえば、動画が終始暗い場合は、オーバーレイ テキストに明るいフォントの色を選択するか、フィルターを使用して動画の明るさを変更します。

ページあたりの背景動画の数を制限する

1ページに追加する背景動画を2つまでに抑えます。これによりページ サイズが小さくなり、読み込み時間が短縮されます。

背景動画はいくつアップロードできますか？

各サイトには、アップロードした動画用の30分の動画ストレージが含まれています。この制限に達した場合は、ストレージを増やすか、サイトから動画を削除してストレージ容量を確保できます。

YouTubeまたはVimeoの動画が機能しないのはなぜですか？

YouTubeやVimeoの動画をURLで埋め込む場合は、URLに動画の特定のセクションのタイムスタンプが含まれないようにしてください。タイムスタンプが含まれていると、動画が読み込まれなくなります。

YouTube動画の場合は、[限定公開] または [公開]に設定し、埋め込みを許可してください。

Vimeo動画の場合、プライバシー設定を [公開] または [Vimeoから非表示] に設定し、[任意の場所] または [特定のドメイン] への埋め込みを許可します。特定のドメインにのみ埋め込みを許可する場合は、表示されるテキスト フィールドに必ずご自身のWebサイトのドメインを追加してください。

背景動画の上に広告が表示されるのはなぜですか？

YouTubeでオーバーレイ広告を無効にして、背景動画の上に表示されないようにしてください。動画の前に再生される動画広告 (プレロール広告) は、背景動画では再生されません。

バージョン7.0の背景動画に関する動画

バージョン7.0では、カバー ページや一部のテンプレートのページ バナーに背景動画を追加できます。