Video Element Color Play button

Hey cktanju,

Thank you for the inquiry.

Are you using mp4 or a locally hosted video? If yes, then you will have to replace the default mejs-controls.svg file in order to adjust the appearance of the player controls. The svg file is located in the wp-includes > js > mediaelement folder.

Best regards,
Ismael

Hi,

Thank you for the update.

You can upload a custom svg file to the uploads folder or use the Media > Library to upload a media file, then use the following css code to adjust the style of the video controls.

.mejs-button>button {
    background: transparent url(mejs-controls.svg);
    border: 0;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    width: 20px;
}

Replace the value of the background property with the custom svg file.

Best regards,
Ismael

Hi,
Thanks for the link to your page, try using this css in your Quick CSS:

.mejs-overlay-button:after {
	content: url(https://img.icons8.com/color/80/null/play-button-circled--v1.png);
}
.mejs-overlay-button {
    background: unset;
}

After applying the css, please clear your browser cache and check.

you can choose a different play button from this site, they are free to use and some you can choose custom colors.
To get the link for the css, click Download ▸ CDN and copy the link, or you can download and upload to your site and then use the url to the image on your site.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike