Ria du PlessisA 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.
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
More Articles You Will Like
