Wixエディタ:動画ボックスを使用する
読了時間:6分
視覚的にインパクトのあるコンテンツで、訪問者の好奇心を刺激しましょう。ユニークな動画ボックスで、独自の動画や無料の Wix 動画、プロフェッショナルな Shutterstock 動画を掲載しましょう。
まずはお好みの動画ボックスデザインを選択し、動画を追加してかカスタマイズを開始します。ボックスの形や枠線をデザインしたり、素敵なオーバーレイパターンやダイナミックな動画マスクを追加したり、再生ボタンをカスタマイズすることができます。

下記をご確認ください:
動画ボックスを追加する
「追加」パネルから動画ボックスデザインを選択してサイトに追加します。動画ボックスにマウスオーバーすると、動きを確認できます。サイトに追加したら、既存の動画を保持するか、メディアマネージャーから別の動画を選択します。
こちらをクリックして手順を確認しましょう
ヒント:
こちらをクリックして、サイトに動画ボックスを追加することもできます。

動画を選択する
動画ボックスを追加したら、メディアマネージャーから動画を選択します。無料の Wix 動画を追加したり、Shutterstock の動画を購入したり、自分でアップロードすることもできます。
こちらをクリックして手順を確認しましょう

動画ボックスの動作を変更する
再生、一時停止、リプレイ設定などをカスタマイズして、動画ボックスとサウンドの動作を設定しましょう。サイトでのエンゲージメントと訪問者のインタラクションの向上につながるオプションを見つけましょう。
こちらをクリックして手順を確認しましょう

重要:
ほとんどのインターネットブラウザではサウンドがミュートされている場合にのみ動画が自動再生されます。動画が自動的に再生されるように設定されている場合、動画は音声なしで再生されます。
再生ボタンをカスタマイズする
動画がクリックされたときに再生されるように設定すると、再生ボタンが表示され、訪問者はいつでも再生・停止することができます。プリセットのデザインから再生ボタンを選択し、必要に応じて色と不透明度を変更できます。
こちらをクリックして手順を確認しましょう

動画ボックスをデザインする
ここから動画ボックスをさらにカスタマイズしましょう。カバー画像、枠線、影を選択し、パターンオーバーレイを適用してユニークな効果を作成します。サイトのスタイルに合わせて様々なパターンを選択することができます。
デザインオプションを試して、サイトのニーズに最も合うものを選択しましょう。
こちらをクリックして手順を確認しましょう

マスクで動画ボックスの形を変更する
動画ボックスを使用すると、動画を従来の長方形のフォーマットに制限する必要はなく、動画マスクを適用することで、動画をユニークな形に切り取り、印象的なビジュアルエフェクトを作成することができます。
様々なシェイプやベクターアートから選択でき、カスタムシェイプのSVGファイルをアップロードすることもできます。
こちらをクリックして手順を確認しましょう

よくある質問
ライブサイトで動画が再生されないのはなぜですか?
動画を自動再生に設定したのに音が出ません。なぜですか?
動画ボックスのインスピレーション
以下の例では、左側にある動画ボックスを複製し、左右を反転させて、動画が互いに向き合うようにしてあります。両方の動画に同じマスクとパターンオーバーレイがあり、ホバーで再生するように設定されています。
