All Collections
FAQ's and Troubleshooting
Change The Video Module Overlay Play Icon With Image
Change The Video Module Overlay Play Icon With Image

How to change the video module’s play icon with a custom image in Divi

Cristi avatar
Written by Cristi
Updated over a week ago

If you use the overlay option in the video module and generate a thumbnail for the video, you will notice the play icon on top of that image, as seen here:

However, if you want to change it, it can be done with a simple CSS snippet.

Step 1. Upload the image to WordPress or choose one from the Media Library

Before jumping into the CSS Snippet, choose the image used. It can be a new image, which has to be uploaded to the Media Libary, or an existing image from the Media Library.

Go to Dashboard > Media > Library and upload or choose an existing image.

Select the image that will be used as the module's play icon. Check the Image's size and copy its URL to the clipboard:

Step 2. Add the custom CSS code

Copy/Paste the following CSS Snippet to Divi > Theme Options > General Tab > Custom CSS to apply it globally (for all video modules):

.et_pb_video_play:before {
background: url(https://site.com/icon.png);
font-size: 0;
height: 60px;
width: 60px;
display: block;
left: 0;
right: 0;
margin:auto;
}
a.et_pb_video_play {
    margin-left: 0 !important;
    left: 0;
    right: 0;
}

Or add the code in the page's custom Custom CSS field to apply on the current page only.

Be sure to change the image link, the width and height of your image.


The result can be seen here: 

Did this answer your question?