メインコンテンツにスキップ

動画ボックス

動画ボックスは、mp4やwebm形式の動画をページ上に直接配置できる機能です。画像やテキストと同様に自由なレイアウトが可能で、サイトに動画ならではの動きやインパクトを加えたい場面で活用できます。

今週アップデートされました

Point:動画ファイルのアップロード方法や容量制限については、以下の記事を参照してください。

動画ボックスとは

動画ボックスは、ページ上に動画ファイルを直接配置できる機能です。画像やテキストボックスと同じように、キャンバス上で自由なレイアウトやスタイル編集が可能です。

Webサイトのファーストビュー(トップ画面)やサービス紹介、ギャラリーなど、動きやインパクトを加えたい場面で活用できます。

注意:動画ボックスで利用可能な動画ファイル

動画ボックスで配置することができるのは、Studioに直接アップロードされた1GBまでの動画ファイル(mp4, webm)のみです。外部サーバーにアップロードされた動画は利用できません。


動画ボックスを追加する

動画ボックスは<video>タグとして追加されます。

追加した動画ボックスを、画像などの他のボックスに変換することはできません。

  1. 画面左側のナビゲーションで、[追加]アイコンを選択します。

  2. 追加パネルで[基本]タブを選択します。

  3. [基本]メニュー内から、[Video]ボックスを選び、ページに配置します。

Tips: 再生・停止ボタン付き動画ボックス(Video with Button)

動画の操作性を高めたい場合は、再生・停止ボタンが付いたVideo with Buttonがおすすめです。

追加パネル内[基本]タブの[インタラクション]メニューから選択できます。

Video with Buttonの注意点

  • 親ボックス<div>内に動画ボックス<video>と絶対位置の再生・停止ボタン<button>が配置され、グループ化されたパーツです。

  • コンポーネント化することはできません。

  • グループ化を解除すると、動画と再生・停止ボタンの連携が失われ再度グループ化しても連携は復活しません。

  • グループ化を解除すると、再生・停止ボタンが消えたように見える場合がありますが、多くの場合は同レイヤー右下に移動しています。

  • 再生・停止ボタンは、一度削除すると再び作成することができません。

  • 再生・停止ボタンには表示条件が設定されています。表示条件を削除すると再び設定することができません。


動画を置き換える

  1. 対象の動画ボックスをダブルクリックします。

  2. 左パネル上の[アップロード&置き換え]パネルから、変更したい動画を選択して動画を置き換えます。


動画の表示・再生方法の設定

動画ボックスでは、動画の表示や再生方法を設定できます。

  1. 該当の動画ボックスを選択します。

  2. 右パネルで[動画]タブを選択します。

    パネルが閉じている場合には、右パネルを開いてください。

  3. 動画タブにて、動画の表示設定をします。

動画の設定項目

[動画]タブのトップには、動画の1フレーム目の画像が表示されます。設定項目の詳細は以下の通りです。

  • URL:動画のURLが表示されます。

  • ポスター画像:動画再生前のプレビュー画像や、動画の読み込み不可時に表示する画像を設定できます。初期値では動画の1フレーム目がポスター画像となります。

  • 動画の配置:動画をトリミング(切り抜き)して表示したい場合に設定します。設定値と表示の詳細は以下のとおりです。

    • cover:動画の縦横比を維持したまま、ボックス全体を覆うように拡大・縮小されます。余白はできませんが、コンテナと動画の縦横比が異なる場合は、動画の一部がトリミング(切り抜き)されます。

    • contain:動画の縦横比を維持したまま、ボックス内に全体が収まるように拡大・縮小されます。動画全体は必ず表示されますが、縦横比が異なる場合は上下または左右に余白ができます。

    • fill:動画がボックス全体を隙間なく埋めるように引き伸ばされます。縦横比は無視されるため、動画が横や縦に伸びたり縮んだりして、歪むことがあります。

    • none:動画は元のサイズのまま表示されます。ボックスより大きい場合ははみ出し、小さい場合は余白ができます。リサイズやトリミングは行われません。

    • scale-downcontainnoneのうちより小さく表示される方が適用されます。動画がボックスより大きい場合はcontainが適用となり縮小表示され、小さい場合にはnoneが適用となり元のサイズのまま表示されます。

  • プレイヤーを表示:プレイヤーの表示 / 非表示を切り替えます。(プレイヤーの表示方法やデザインは、使用ブラウザの機能や仕様によって決まります。サービス側で個別に変更することはできません。)

  • 自動再生:オンにすると動画が自動再生されます。

    • 連動して、ミュートがオンになります。

    • インライン再生をオンにすると連動してオンになります。

  • ミュート:オンにすると、動画に音声が含まれている場合にはデフォルトの再生時音声が無音(ミュート)になります。

    • インライン再生をオンにすると連動してオンになります。

    • 自動再生をオンにすると連動してオンになります。

  • ループ再生:オンにすると自動的に動画が連続再生(ループ再生)されます。

  • インライン再生:オンにすると、モバイル表示時に動画がフルスクリーン再生されず、ページレイアウトの中でそのまま再生されます。

    • 連動して、自動再生ミュートがオンになります。

  • PiPを無効:オンにするとPiP(ピクチャー・イン・ピクチャー(Picture-in-Picture))を選択できなくなります。

  • クリックで再生:オンにすると、ユーザーが動画をクリックしたときにだけ動画が再生されます。

    • エリア指定:エリア指定の設定をすると、動画をクリックに加え、指定した要素(エリア)をクリックしたときにも動画が再生・停止されます。ボタンやボックスなど、動画再生のトリガーにしたい要素にIDを設定し、エリア指定で該当のIDを選択します。

      以下の画像の設定では、#play_videoのIDが設定されたPlayアイコン<i>をクリックすると、動画の再生・停止ができます。


動画のタグ・属性を設定する

タグ・属性の設定は、設定タブで行います。

  1. 該当の動画ボックスを選択します。

  2. 右パネルで[設定]タブを選択します。

    パネルが閉じている場合には、右パネルを開いてください。

  • タグ:HTMLタグの設定箇所です。<video>で固定され、編集できません。(参考:HTMLタグ

  • ID:動画ボックスに任意のIDを付与できます。(参考:IDの設定

  • aria-label、aria-hidden:詳細は、「aria-label」と「aria-hidden」とはを参照してください。


動画ボックスの操作

動画ボックスは、画像ボックスと同様に以下の操作が可能です。

動画ボックスを選択した状態で右クリックでメニューが表示されます。

注意:

動画ボックスに直接要素を重ねることはできません。

動画を背景にしたい場合など、要素を重ねる際は親ボックスを用意し、重ねたい要素を絶対位置指定で配置してください。


動画ボックスの外観やレイアウトを編集する

他のボックスと同様に、外観やレイアウトを編集したり、条件付きアニメーションの設定ができます。

詳しくは ボックスのデザイン設定 にリストされたヘルプ記事を参照してください。

こちらの回答で解決しましたか?