Skip to content
StoreDocsSupport
Get Divi Torque

Advanced Video Modal

Advanced Video Modal shows a play trigger and opens a video in a popup when it is clicked. Its one job is playing a video without leaving the page.

How to add the Advanced Video Modal module

  1. Open the Visual Builder and add a section and row.
  2. Search for "Advanced Video Modal" and add the module.
  3. Choose the Video Type and enter the Video URL or upload an MP4.
  4. Choose what the visitor clicks in the Button Element setting.

Content

Content group

  • Use Overlay Image: On by default. Shows an image behind the trigger.
  • Image: The overlay image.
  • Image Alt Text: Alternative text for the overlay image.
  • Button Element: Icon (default), Text, or Icon & Text.
  • Select Play Icon: Icon 1 to Icon 6, or Custom Icon. Default is Icon 1.
  • Custom Icon: Your own icon image. Used when Select Play Icon is Custom Icon.
  • Trigger Text: Default "Play". Shown when Button Element includes text.
  • Video Type: Youtube (default), Vimeo or Custom Upload.
  • Video URL: The video link for Youtube and Vimeo.
  • Video MP4 File: The uploaded file for Custom Upload.
  • Extra Trigger Selector: Optional. A CSS selector for other elements on the page that should open the same video, for example .open-video or #watch-demo. Any number of elements can match.

Settings group

  • Use Animated Icon: Off by default. Adds an animated wave around the icon.
  • Animated Wave Color: Default #ffffff.
  • Icon/Text Alignment: Left, Center (default) or Right.
  • Spacing Between Icon and Text: Default 20px.

Design

Image group

  • Image Height: Height of the overlay image.
  • Background: Background options for the module.

Icon group

  • Color: Default #5b2cff.
  • Size: Default 60px.
  • Opacity: Default 1.
  • Height and Width: Default initial.
  • Background: Background color behind the icon.
  • Border Radius: Default 0px.

Text group

  • Use Text Box: Off by default.
  • Text Box Height and Text Box Width: Default 80px each.
  • Text Box Background: Default #5b2cff.
  • Text Box Border Radius: Default 0px.

Text Font group

Font settings for the trigger text.

  • Popup Background: Default rgba(0,0,0,.8).
  • Close Icon Color: Default #ffffff.

FAQ

Does Advanced Video Modal work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module with the same name. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

Youtube, Vimeo and an uploaded MP4 file. Short youtu.be links are converted to full YouTube links.

Which script opens the popup?

The module uses Magnific Popup, which the plugin enqueues when the module renders.

Can a button elsewhere on the page open the video?

Yes. Enter its CSS selector in Extra Trigger Selector, and give that element the class or ID in its own Advanced tab.