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:
