How To Add A Video Module To Your Page

Before you can add a video module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.


Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.


Locate the video module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “video” and then click enter to automatically find and add the video module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.


Content Options


Video URL

The Divi Video module lets you add video using two different methods. You can either upload your own video file from your computer by clicking the “Upload Video” button and selecting the desired file, or you can input any Video URL from a third party video source such as Youtube or Vimeo. Simply copy and paste the URL from your browser and paste it into the Video URL field and Divi will take care of the rest!.

Image Overlay URL

If you would like to define a custom video thumbnail image, which will be placed over the standard video interface with a custom play button to create a cleaner and more stylized appearance, then you can choose to do so using the Image Overlay field. This field allows you to either upload your own custom image, or let Divi automatically generate one from your video URL. Most of the video providers support this option, such as Youtube and Vimeo. Simply click the “Generate From Video” button and let Divi take care of the rest!

Admin Label

By default, your video module will appear with a label that reads ‘Video’ in the builder. The Admin Label allows you to change this label for easy identification.




Design Options


Play Icon Color


If you designate an image overlay for your video module, the video displayed contains a play icon over the video. You can designate the color of this icon here to match the color scheme of your page.




Advanced Options



CSS ID and Classes

This can be used to add a unique CSS ID or Class to your module. These can then be used in your stylesheet or within the Theme Options Custom CSS box to apply custom styling to the module. CSS ID’s can also be targeted with anchor links to link to certain areas of your page.

Custom CSS

Here you can add custom CSS to your video module.

Visibility

If you want to hide your video module on certain devices, you can select which devices on which you want the video module to be disabled.