対象プラン：全プラン
動画ボックスの特徴と操作方法
動画ボックスは、1GBまでのmp4やwebm形式の動画をページ上に直接配置できる機能です。本記事では、動画ボックスの特徴と追加・編集・削除などの基本操作を解説します。
動画ボックスとは
動画ボックスは、ページ上に動画ファイルを直接配置できる機能です。画像やテキストボックスと同じように、キャンバス上で自由なレイアウトやスタイル編集が可能です。
Webサイトのファーストビュー（トップ画面）やサービス紹介、ギャラリーなど、動きやインパクトを加えたい場面で活用できます。
注意：動画ボックスで利用可能な動画ファイル
動画ボックスで配置することができるのは、Studioに直接アップロードされた1GBまでの動画ファイル（mp4, webm）のみです。外部サーバーにアップロードされた動画は利用できません。
動画ファイルのアップロード方法は、各種ファイル（画像・動画・PDF）をStudioにアップロードするをご覧ください。
外部サービス（YouTubeやVimeo等）の動画をページに埋め込む場合は、embedボックスをご利用ください。
動画ボックスの操作方法
Point：動画ファイルのアップロード方法や容量制限については、以下の記事を参照してください。
動画ボックスを追加する
画面左の追加パネルで動画ボックスを追加します。動画ボックスは<video>タグとして追加されます。
注意：ページに追加した動画ボックスを、画像などの他のボックスに変換することはできません。
追加パネル内[ボックス]タブから追加する方法
画面左側の[>]で左パネルを開き、[追加]を選択して追加パネルを開きます。
追加パネル内のリストから[ボックス]を選択します。
Basicボックスから[Video]を選択し、ページに配置します。
追加パネル内[アップロード]タブから追加する方法
画面左側の[>]で左パネルを開き、[追加]を選択して追加パネルを開きます。
追加パネル内のリストから[アップロード]を選択します。
動画をドラッグ＆ドロップでページに配置します。
Tips: 再生・停止ボタン付き動画ボックス（Video with Button）
動画の操作性を高めたい場合は、再生・停止ボタンが付いたVideo with Buttonがおすすめです。追加パネル内[ボックス]タブのComponent Partsから追加できます。
Video with Buttonの注意点
親ボックス<div>内に動画ボックス<video>と絶対位置の再生・停止ボタン<button>が配置され、グループ化されたパーツです。
コンポーネント化することはできません。
グループ化を解除すると、動画と再生・停止ボタンの連携が失われ再度グループ化しても連携は復活しません。
グループ化を解除すると、再生・停止ボタンが消えたように見える場合がありますが、多くの場合は同レイヤー右下に移動しています。
再生・停止ボタンは、一度削除すると再び作成することができません。
再生・停止ボタンには表示条件が設定されています。表示条件を削除すると再び設定することができません。
ボックスの動画を変更する
画面左側のアセットパネルにて、配置済みボックスの動画を変更できます。
対象の動画ボックスをダブルクリックして、アセットパネルを開きます。
アセットパネルから、ページに追加したい動画を選択します。
動画の表示・再生方法の設定
画面右側のボックス設定パネルにて、動画の表示や各種再生設定が可能です。
画面左側の[>]で左パネルを開き、[レイヤー]を選択してレイヤーパネルを開きます。
レイヤーパネルで、設定変更をしたい動画ボックス（<video>タグの要素）を選択します。
動画ボックスを選択した状態で、画面右側の[<]から右パネルを開き[ボックス]タブを選択します。
ボックス設定パネルで以下の設定をします。
タグ：HTMLタグの設定箇所です。<video>で固定され、編集できません。（参考：HTMLタグ）
ID：動画ボックスに任意のIDを付与できます。（参考：IDの設定）
ビデオ：動画の1フレーム目の画像と、動画のURLが表示されます。
ポスター画像：動画再生前のプレビュー画像や、動画の読み込み不可時に表示する画像を設定できます。初期値では動画の1フレーム目がポスター画像となります。
動画の配置：動画をトリミング（切り抜き）して表示したい場合に設定します。設定値と表示の詳細は以下のとおりです。
cover：動画の縦横比を維持したまま、ボックス全体を覆うように拡大・縮小されます。余白はできませんが、コンテナと動画の縦横比が異なる場合は、動画の一部がトリミング（切り抜き）されます。
contain：動画の縦横比を維持したまま、ボックス内に全体が収まるように拡大・縮小されます。動画全体は必ず表示されますが、縦横比が異なる場合は上下または左右に余白ができます。
fill：動画がボックス全体を隙間なく埋めるように引き伸ばされます。縦横比は無視されるため、動画が横や縦に伸びたり縮んだりして、歪むことがあります。
none：動画は元のサイズのまま表示されます。ボックスより大きい場合ははみ出し、小さい場合は余白ができます。リサイズやトリミングは行われません。
scale-down：
containとnoneのうちより小さく表示される方が適用されます。動画がボックスより大きい場合はcontainが適用となり縮小表示され、小さい場合にはnoneが適用となり元のサイズのまま表示されます。
プレイヤー：プレイヤーの表示 / 非表示を切り替えます。（プレイヤーの表示方法やデザインは、使用ブラウザの機能や仕様によって決まります。サービス側で個別に変更することはできません。）
自動再生：オンにすると動画が自動再生されます。
連動して、
ミュートがオンになります。インライン再生をオンにすると連動してオンになります。
ミュート：オンにすると、動画に音声が含まれている場合にはデフォルトの再生時音声が無音（ミュート）になります。
インライン再生をオンにすると連動してオンになります。自動再生をオンにすると連動してオンになります。
ループ再生：オンにすると自動的に動画が連続再生（ループ再生）されます。
インライン再生：オンにすると、モバイル表示時に動画がフルスクリーン再生されず、ページレイアウトの中でそのまま再生されます。
連動して、
自動再生とミュートがオンになります。
PiPを無効：オンにするとPiP（ピクチャー・イン・ピクチャー（Picture-in-Picture））を選択できなくなります。
クリックで再生：オンにすると、ユーザーが動画をクリックしたときにだけ動画が再生されます。
エリア指定：エリア指定の設定をすると、動画をクリックに加え、指定した要素（エリア）をクリックしたときにも動画が再生・停止されます。ボタンやボックスなど、動画再生のトリガーにしたい要素にIDを設定し、エリア指定で該当のIDを選択します。
以下の画像の設定では、
#play_videoのIDが設定されたPlayアイコン<i>をクリックすると、動画の再生・停止ができます。
動画ボックスの操作
動画ボックスは、画像ボックスと同様に以下の操作が可能です。
動画ボックスを選択した状態で右クリックでメニューが表示されます。
ボックスを複製
ボックスを削除
コンポーネント化 ※Video with Buttonでは不可
動画ボックスのスタイル編集
他のボックスと同様に、画面上部のスタイルバーで枠線や色、不透明度などのスタイル編集やアニメーション設定が可能です。
詳しくはボックス毎の設定（スタイルバー）をご覧ください。