Customizing the play icon on your video overlays can enhance the visual appeal and user experience of your Divi website.
In this article, we will guide you through the process of changing the Video Module's overlay play icon.
If you are using 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:
If you want to change it, custom CSS code will have to be used. This customization involves two steps:
Upload the custom image that you want to use instead of the default Play icon
Use custom CSS code to change the Play icon with your custom image.
Upload the image to WordPress or choose one from the Media Library
Go to Dashboard → Media → Library and upload or choose an existing image.
Select the image that you want to use
Make sure the size of the image is appropriate. We do recommend using images with an aspect ratio of 1:1. The recommended size is 48x48px.
Click on the Copy URL to Clipboard button to copy the URL of the image to your clipboard
Open the Video module's settings for which you want to change the default Play icon
Go to Advanced Tab → Custom CSS → Free Form CSS
Paste the following CSS code:
selector .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;
}
selector a.et_pb_video_play {
margin-left: 0 !important;
left: 0;
right: 0;
}
Note: In the above CSS Code, make sure you change the https://site.com/icon.png path with your actual image path - from Step 4.
The result can be seen in the screenshot below:
