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 generated 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 code:

.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;
}


The result can be seen here: 


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

Add the code in Dashboard > Divi > Theme Options > Custom CSS field, to apply globally (for all video modules)

Or add the code in the page custom CSS settings, to apply on the current page only.

Did this answer your question?