Webサイトを開いた瞬間、背景で美しい映像が流れているデザイン。企業のコーポレートサイトや、リッチな雰囲気を出したいLPなどでよく見かけますよね。 「あんなプロっぽいサイト、自分にも作れるのかな？」と思うかもしれませんが、Elementorなら簡単に実装可能です。

しかし、背景動画の設定にはスマホ表示におけるルールが存在します。これを知らないと、せっかくのサイトがスマホで見た時に崩れてしまうことも…。

今回は、Elementorで背景動画を設定する基本手順と、設定すべき代替画像について解説します。

 

 Elementor で背景動画を設定する方法

背景動画は、ウィジェットとして動画を置くのではなく、コンテナまたはセクションの背景として設定します。

⚫︎ 設定手順

1. 動画を入れたい一番上のコンテナまたはセクションを選択します。
2. 左パネルの [スタイル] タブを開きます。
3. 背景メニューの中にある、バックグラウンドタイプから動画を選択します。
4. 動画リンクの欄に、表示させたい動画のURLを貼り付けます。

 

⚫︎ 使える動画の形式

• YouTube または Vimeo のリンク：URLをコピペするだけでOK

• mp4ファイル：もちろん自分でサーバーにアップロードした動画も使えます。その場合はメディアライブラリからmp4のURLをコピーして貼り付けます。

 

 

 自動再生させるための必須設定

背景動画として機能させるには、勝手に再生されて、繰り返し流れる状態にする必要があります。動画リンクのすぐ下にある設定を確認しましょう。

• モバイルで再生：オン（※オンにしても再生されない機種があります）

お使いのバージョンによって以下の設定も表示されます。

• 自動再生：オン

• ミュート (消音)：絶対にオン

• ループ：オン

ここでミュートのオン/オフが選べる場合は必ずミュートを「オン」にしましょう。

現在の Google Chrome や Safari などのブラウザは、ユーザーを不快にさせないために音が出る動画の自動再生を厳しくブロックしています。ミュートをオンにしておかないと、そもそも動画が再生されないので注意してください。

 

 

 【重要】スマホで再生されない問題と代替画像

PCでは綺麗に再生されていても、スマホで確認すると再生されない、真っ白（または真っ黒）な背景になってしまうということがあります。

これは、スマホのOS（iOSやAndroid）やブラウザが、ユーザーの通信量やバッテリーを節約するために、動画の自動再生を強制的にストップさせることがあるためです。これは Elementor のバグではなく、スマホの仕様です。

 

⚫︎ 解決策：背景の代替（フォールバック）」を設定する

動画が再生されなかった時の保険として、「代替画像（Background Fallback）」を設定しておきましょう。

1. 動画リンク設定の下の方にある「背景の代替 (Background Fallback)」を見つけます。
2. 画像選択ボタンをクリックし、動画の代わりになる画像を設定します。

こうすることで、動画が再生されないスマホ端末や、通信環境が悪くて動画の読み込みが遅い時には、まずこの代替画像が表示されます。代替画像には、動画のワンシーンをスクリーンショットした画像を設定するのが自然でおすすめです！

 

 

 前回の復習です！動画の上の文字を読みやすくする

動画を設定してよし完成！と思いきや、映像が明るすぎて上に乗せたキャッチコピーが読めない…という事態に陥っていませんか？

そんな時は、以前のコラムで紹介した「背景オーバーレイ」の出番です！ 動画を設定したのと同じ [スタイル] タブのすぐ下にある背景オーバーレイを開き、半透明の黒などを被せてあげましょう。これで、動画の動きを活かしつつ、文字もはっきり読ませることができます。

▼「背景オーバーレイ」で画像上の文字の可読性を上げる方法

 

 

  まとめ

• 背景動画はコンテナ・セクションの [スタイル] タブ ＞ 背景から設定する。

• 自動再生させるために、ミュート（消音）をオンにする。

• スマホで再生されない時のために、背景の画像を設定する。

• 文字が読みにくい時は背景オーバーレイを組み合わせる。

背景動画はサイトの第一印象を爆発的に良くする強力な武器です。 スマホでの見え方と読み込み速度に気を配りながら、是非あなたのサイトにも取り入れてみてください！