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. There are times when you want to give your video module a different look. In this article, we’ll see how to add image overlays to your Divi Video module.
So, let’s get to it!
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.
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.
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.
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.
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!