背景動画(セクションの後ろに動画を流す)

この記事でできること

  • ✓動画ファイルをアップロードして、セクションの背景に敷ける
  • ✓使える動画の形式・大きさ・本数が分かる
  • ✓動画が流れない場合が分かる

背景動画とは

コードで作ったセクションの後ろ全面に動画を流す演出です。見出し・文章・ボタンは動画の上に載ります。

  • 音は出ません(常に消音)。繰り返し流れ続けます
  • 文字が読みやすいように、動画の上に 20% の暗い膜を重ねます
  • スマホでも流れます。画面の外に出た動画は止め、画面に入るとまた流れます(通信量と電池の節約)
  • 「スクロールで動かす」で 視差 を選んでいると、背景動画もスクロールよりゆっくり動きます

使える動画

項目条件
形式mp4・webm
大きさ1本 50MB まで
本数1つのLPに 3本 まで
プランスタンダードプラン以上

💡 YouTube・Vimeo の動画は背景にできません(自動で流す制限が強いため)。動画ファイルをアップロードしてください。

敷き方

  1. 編集画面で、コードで作ったセクションの上にある 「背景動画:」 の 「🎬 アップロード」 を押す
  2. 動画ファイルを選ぶ
  3. アップロードが終わると、プレビューのそのセクションの後ろで動画が流れます

外すときは 「外す」、別の動画にするときは 「差し替える」 を押します。

文字が読みにくいとき(作り直しの案内)

背景動画を付けると、動画が見えるようにセクションの背景色は透明になります。もとの配色(白い背景に濃い色の文字など)のままだと、動画の上で文字が読みにくくなることがあります。

動画を付けた・差し替えた直後に、編集画面に 「動画の上に載せる前提で作り直す」 ボタンが出ます。押すと、このセクションを「背景は透明・文字は白系+影・カードは半透明の暗い面」で作り直します(今の内容は履歴から戻せます)。

敷けないセクション

  • 画像のセクション(写真・絵で作ったセクション)には敷けません。文字が画像に入っているため、動画の上に載せられないからです。背景動画を使いたいセクションは、仕上げを 「⌨️ コード」 にしてください

流れない場合

  • 端末の設定で「視差効果を減らす」「動きを減らす」を選んでいる人には、動画を止めて表示します
  • iPhone の低電力モードなど、端末の側で自動再生を止めていると流れないことがあります
  • 動画の背景に合わせて、セクションの背景色は透明になります。文字が読みにくいときは、上の「動画の上に載せる前提で作り直す」を使うか、明るさの落ち着いた動画を選んでください

HTML/ZIP 出力での注意

HTML/ZIP 出力に入る背景動画は、動画ファイルそのものは含まれず、LP Board に置いた動画を読みに行きます。そのため、LP Board でプロジェクトを削除すると、出力した HTML の背景動画は再生できなくなります。

関連記事

この記事は役に立ちましたか?