今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi では動画を複数の方法で配置することができます。動画はファイルサイズが大きいので、あまり多量に配置するのはおすすめできませんが、ところどころに使うと効果的です。また、MP4動画を使う以外により軽い方法でアニメーションを設定する方法についても図解します。
Diviサイトで動画を表示する Diviの使い方5-2
１．動画モジュールで動画を表示する
動画を表示させるには複数の方法がありますが、まずは、動画モジュールを利用する方法から説明します。
 | モジュールを挿入で新規モジュールから「動画」を選択します。 |
１）MP4 動画を設定する
MP4 の動画を表示させるには、動画の設定で 表示させたい MP4 ファイルを指定します。動画モジュールは初期設定では Divi の解説が表示されているので、
 | 動画上のゴミ箱のアイコンをクリックし削除します。
|
 | 「＋（Add Video）」をクリックします。 |
メディアライブラリが表示されるので、表示させたい動画ファイルを選択して、
 | 「動画をアップロードする」をクリックします。 |
 | その際に埋め込みまたはリンクを設定できます。 |
 | 表示させたい動画に置きかわるので、それでよければ、 |
 | 「✔（チェックマーク）」をクリックして承認します。 |
そうすると下記のように、サイトで動画を表示させることができます。
２）WebM 動画を表示させる
Divi には WebM 動画をアクセスしてきたブラウザで切り分けて表示させることができる機能があります。
 | 動画設定で「動画.WEBM」に WebM 動画を上記手順と同様の手順で設定するだけです。 |
下記のように、WebM に対応したブラウザでは WebM で、そうでない場合は MP4 で動画が表示されます。
２．背景に動画を設定する
１）モジュールの背景に動画を設定する
背景に動画を設定するには、例えばテキストモジュールでは下記のようにコンテンツの、
 | 「背景」をクリックします。 |
 | 背景の「再生アイコン」をクリックします。 動画モジュールと同様に MP4 と WebM を設定します。 |
| 設定したら「✔（チェックマーク）」をクリックして承認します。 |
下記のようにテキストの背景に動画が表示されます。
動画テスト（モジュールの背景）
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
ブレンドモード（デザイン＞フィルター＞保存モジュール：通常）
２）行の背景に動画を設定する
背景はモジュールだけでなく、行（Row）やセクションでも同様に設定し利用できます。下記は行のカラム１の背景に設定しています。
動画テスト（モジュールの背景）
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
ブレンドモード（デザイン＞フィルター＞保存モジュール：通常）
なので、行やモジュールとを組み合わせて、文字のカラーが動くようにも作成できます。
 | 行のカラムの背景に動画を設定し、 |
 | テキストモジュールの「デザイン」＞「テキスト」で、 |
 | テキストカラーを白に変更し、 |
 | テキストモジュールの背景の塗りつぶしで、Add Background Color をクリックし、 |
 | テキストモジュールの背景の塗りつぶしで、黒く塗りつぶし、 |
 | デザインの Filters で、 |
 | Blend Mode を通常から、スクリーンに変更します。 |
下記のように文字の部分が動画で動くようになります。
動画テスト（モジュールの背景）
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
テキスト ABCD abcd ● ▼ ▲ ■ ★
■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■
ブレンドモード（デザイン＞フィルター＞保存モジュール：通常）
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。