How to Add Image Overlays to Your Divi Video Module
Editorial Note We may earn a commission when you visit links from this website.

A video is a great way to show your video content on your Divi website. By default, the video module shows a snapshot of the video. Sometimes you want to give your video module a different look. This article will show how to add image overlays to your Divi Video module.

So, let’s get to it!

Table of Contents

Add Image Overlays To Your Divi Video Module

The Video Slider module on the Divi Builder can display MP4 or Webm videos. You have two options on ways to add them to your Divi Website. You can upload videos to your media library, or add them via links using their URLs. These URLs are usually links from YouTube or other platforms where your videos are hosted.

When building a website, you want to add your own personal touch so that the module can blend in with you aesthetic of your website, right? So, the easiest way to do this is to add your own video image overlay to each video on your website. You have the option to use the thumbnail of the video itself or you can upload your own image.

Each slide is a submodule that’s added within the video Divi module itself. You can style the module to create default settings and you can style each submodule individually. If you don’t style the submodule, it will use the default styling that you’ve set up in the regular module settings. Options include arrows, image overlays, custom icons, and hover overlays.

Adding the Video Module to a New Page

First, you will add the Video module to a page on your website using your Divi Builder. Then, when the module is added, you will enable the Visual Builder and add a new single-column Row. Then, search for Video and click the Divi Video module. This will insert the Divi Video module into your column row.

Adding a single-column row with the Divi Builder

Add your Videos to the Video Module

The Video module adds a default video to get you started. Click the gear icon to open the settings.

Next, delete the default video image, or select the icon to change the video. Now, you can select to upload your own video via an MP4 or WebM video or enter the URL to your video that is hosted somewhere else.

*Related Article – The Ultimate Guide To Using Images With Divi

Default Video Image Overlays

Each video has a default dark image overlay when uploaded or added. When you add a video from YouTube, you will be able to see the YouTube controls on your site, your thumbnail, and a dark overlay. Luckily, you can change this if you want to.

Thumbnail Overlay Color

You can change the Thumbnail Overlay Color of your video.  This affects the hover overlay for both the main player and the slider thumbnails.

Overlay Image

To add an overlay image, you can scroll down to Overlay and select Add Image. You can upload an image or you can generate an image from your video.

Final Thoughts

Now you know how to add videos and image overlays with the Divi Video module! The Video module is great for courses, tutorials, or any type of series you want to show on your website. Divi makes it easy to add custom image overlays to give each slide a different look than the video’s screenshot. If you want to know more about Divi Areas Pro and how you can use it with your Divi website, check this out!

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details