Diviテーマで全体の幅に動画の背景を追加する方法

Diviテーマで全幅（Fullwidth）で動画の背景を追加する方法

Diviテーマは、さまざまな方法で動画を追加するオプションを提供しています。 全体の幅に動画を背景（バックグラウンド）に追加することで二つのことを考えてみることができます。 一つは、Sliderモジュールを使用することで、他の一つは、セクションに動画を背景に追加する方法です。

Sliderモジュールを使用して動画を背景に追加する

ディビで提供されるSliderモジュールを使用して画像や動画を使用して、スライダを作成することができます。

スライダーで動画（Video）を背景に挿入する場合は、次の図のようにSlideの設定で Background Video MP4 또는 Background Video Webmに動画をアップロードします。

これにより、次の図のように動画がスライドの背景に追加されます。

参考までにYouTubeやVimeoの場合背景に直接追加することができず、スライドに追加が可能です。

次の動画を参照してみてください。

YouTubeの私の非メオにスライドを追加する場合は、次のように実装が可能です。 （詳細設定を使用して、さまざまな調整が可能です。）

Sliderは、標準のセクションに追加することができるSliderとFullwidthセクションに追加することができるFullwidth Sliderがあります。

これとは別に、YouTubeやVimeoのビデオを追加することができるVideo Sliderがあります。 Video Sliderは、標準のセクションのみ提供され、YouTube、Vimeo、MP4などさまざまな動画形式をサポートします。

Video Sliderの場合は、複数の動画を追加すると、上の図の中で、最初の画像のようにサムネイルナビゲーションを利用することができます。 または点でコントロールを選択することもできます。

ここで サンプルを確認することができます。

セクションに動画のバックグラウンドを挿入する方法

Sliderモジュールを使用する代わりに、セクションのページレイアウトにモジュールを追加するセクションモジュール（Section Module）の設定で動画に背景を追加することができます。

上記のようにモジュールを追加した後のセクションモジュールの設定（上の図で一番左上の三行の設定アイコン）で動画を追加します。

.MP4 .WEBMフォーマットを追加することができます。 結果は、前に紹介したものと同様に実装が可能です。 この場合、ユーザーフレーズのボタンは Call To Action モジュールと テキスト モジュールを使用して手動で追加ヘジュオヤします。

他にも、外部スライダーを使用して動画を追加することも可能です。 例えば、 革命スライダーを使用して動画のスライドを作って追加することができます。 Elegant ThemesのDiviテーマから Slider Revolutionで作成されたスライダーを全幅（Fullwidth）に追加する方法は、次の記事を参照してください。

• DiviテーマでRevolution Sliderを全体の幅に追加する方法

メモ：

• 新しく追加された WordPress Diviテーマの機能16種類
• Elegant ThemesのDiviテーマツアー