背景動画とは
コードで作ったセクションの後ろ全面に動画を流す演出です。見出し・文章・ボタンは動画の上に載ります。
- 音は出ません(常に消音)。繰り返し流れ続けます
- 文字が読みやすいように、動画の上に 20% の暗い膜を重ねます
- スマホでも流れます。画面の外に出た動画は止め、画面に入るとまた流れます(通信量と電池の節約)
- 「スクロールで動かす」で 視差 を選んでいると、背景動画もスクロールよりゆっくり動きます
使える動画
| 項目 | 条件 |
|---|---|
| 形式 | mp4・webm |
| 大きさ | 1本 50MB まで |
| 本数 | 1つのLPに 3本 まで |
| プラン | スタンダードプラン以上 |
💡 YouTube・Vimeo の動画は背景にできません(自動で流す制限が強いため)。動画ファイルをアップロードしてください。
敷き方
- 編集画面で、コードで作ったセクションの上にある 「背景動画:」 の 「🎬 アップロード」 を押す
- 動画ファイルを選ぶ
- アップロードが終わると、プレビューのそのセクションの後ろで動画が流れます
外すときは 「外す」、別の動画にするときは 「差し替える」 を押します。
文字が読みにくいとき(作り直しの案内)
背景動画を付けると、動画が見えるようにセクションの背景色は透明になります。もとの配色(白い背景に濃い色の文字など)のままだと、動画の上で文字が読みにくくなることがあります。
動画を付けた・差し替えた直後に、編集画面に 「動画の上に載せる前提で作り直す」 ボタンが出ます。押すと、このセクションを「背景は透明・文字は白系+影・カードは半透明の暗い面」で作り直します(今の内容は履歴から戻せます)。
敷けないセクション
- 画像のセクション(写真・絵で作ったセクション)には敷けません。文字が画像に入っているため、動画の上に載せられないからです。背景動画を使いたいセクションは、仕上げを 「⌨️ コード」 にしてください
流れない場合
- 端末の設定で「視差効果を減らす」「動きを減らす」を選んでいる人には、動画を止めて表示します
- iPhone の低電力モードなど、端末の側で自動再生を止めていると流れないことがあります
- 動画の背景に合わせて、セクションの背景色は透明になります。文字が読みにくいときは、上の「動画の上に載せる前提で作り直す」を使うか、明るさの落ち着いた動画を選んでください
HTML/ZIP 出力での注意
HTML/ZIP 出力に入る背景動画は、動画ファイルそのものは含まれず、LP Board に置いた動画を読みに行きます。そのため、LP Board でプロジェクトを削除すると、出力した HTML の背景動画は再生できなくなります。