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

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

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

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

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

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

これにより、次の図に示すように、ムービーがスライドの背景に追加されます。

ちなみにYouTubeやVimeoの場合、背景として直接追加することはできず、スライドとして追加が可能です。

次の動画をご覧ください。

YouTubeやVimeoでスライドを追加する場合は、次のように実装できます。 （詳細設定により様々な調整が可能です。）

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

これとは別に、YouTubeとVimeoの動画を追加できるVideo Sliderがあります。 Video Sliderは標準セクションでのみ提供されており、YouTube、Vimeo、MP4などのさまざまな動画フォーマットをサポートしています。

Video Sliderの場合、複数のビデオを追加すると、上の写真の最初の画像のようにサムネイルナビゲーションを使用できます。 または、ドットのコントロールを選択することもできます。

ここで サンプルを確認してみてください。

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

Sliderモジュールを使用する代わりにセクションページレイアウトにモジュールを追加するセクションモジュール設定で、ムービーに背景に追加できます。

上記のようにモジュールを追加したら、セクションモジュールの設定（上の図の一番左上のXNUMX行の設定アイコン）からムービーを追加できます。

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

さらに、外部スライダーを使用して動画を追加することもできます。 例えば、 革命スライダーを使用してムービースライドを作成して追加できます。 エレガント ThemesのDiviテーマから Slider Revolutionで作成したスライダを全幅で追加する方法については、次の記事を参照してください。

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

メモ：

• 新しく追加された WordPress Diviテーマの機能16種類
• エレガント ThemesのDiviテーマツアー