ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi では動画を複数の方法で配置することができます。動画はファイルサイズが大きいので、あまり多量に配置するのはおすすめできませんが、ところどころに使うと効果的です。また、MP4動画を使う以外により軽い方法でアニメーションを設定する方法についても図解します。

動画を表示させるには複数の方法がありますが、まずは、動画モジュールを利用する方法から説明します。

MP4 の動画を表示させるには、動画の設定で 表示させたい MP4 ファイルを指定します。動画モジュールは初期設定では Divi の解説が表示されているので、

メディアライブラリが表示されるので、表示させたい動画ファイルを選択して、

そうすると下記のように、サイトで動画を表示させることができます。

Divi には WebM 動画をアクセスしてきたブラウザで切り分けて表示させることができる機能があります。

下記のように、WebM に対応したブラウザでは WebM で、そうでない場合は MP4 で動画が表示されます。

背景に動画を設定するには、例えばテキストモジュールでは下記のようにコンテンツの、

下記のようにテキストの背景に動画が表示されます。

背景はモジュールだけでなく、行（Row）やセクションでも同様に設定し利用できます。下記は行のカラム１の背景に設定しています。

なので、行やモジュールとを組み合わせて、文字のカラーが動くようにも作成できます。

下記のように文字の部分が動画で動くようになります。