Hi Sumit,
Welcome to BuddyDev.

This is a bug in BuddyPress. The template pack overrides css for button causing this. You can undo that by adding the following css.

1. Please visit Dashboard->Appearance->Customize->Additional CSS and add this

.mejs-controls .mejs-button > button,
.mejs-controls .mejs-button > button:hover {
    background: transparent url(http://example.com/wp-includes/js/mediaelement/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;
}

.mejs-controls .mejs-volume-button > button,
.mejs-controls .mejs-volume-button > button:hover {
    background-position: -60px 0;
}
.mejs-controls .mejs-pause > button,
.mejs-controls .mejs-pause > button:hover {
    background-position: -20px 0;
}

Please change “http://example.com” with your own site’s root url. e.g “https://forum.sinfo.cf”

and save. That will fix it.

PS:- In future, Please be patient.Over the weekend, We offer limited support for critical issues only.

Regards
Brajesh

Hi Sumit,
Thank you for the reply.

You can use rtMedia or if you plan to use MediaPress, you can change the line

 background: transparent url(http://example.com/wp-includes/js/mediaelement/mejs-controls.svg);
    

with

 background: transparent url(https://forum.sinfo.cf/wp-includes/js/mediaelement/mejs-controls.svg);
    

and it will work too. This is what I mean by changing earlier.

If you need any product from BuddyDev, Please drop me a line via contact. I will make sure you have access to it. Please do not worry about the payments.

Regards
Brajesh