Audio element not displaying correctly

[Skyvr]

I have an audio element on my pro site. It was previously displaying correctly with a play icon.

Now it only shows the border around where the play icon button should be. I consistently have issues with the audio element breaking after updates or randomly. Any help would be appreciated.

[mldarshana]

Hi Skyler,

Thanks for writing in! Upon checking your Themeco licenses attached to this username, I see that you have plenty of site URLs, so I could not locate your exact site URL.

First of all, please make sure that you’re fully updated including theme and plugins by following our version information guide here (https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195). If you’re using any older versions, you need to then update your theme and plugins by following our guide (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62).

If you’re still having issues, you can then try disabling your 3rd party plugins (except Cornerstone plugin) and see if you’re encountering a plugin conflict. If the issue resolved, then you can activate your plugins one by one to see which plugin causing this issue.

Please make sure to clear all caches when testing your issue (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you’re still having issues, please provide us with your WordPress login credentials in a secure note to check your issue further.

Let us know how it goes.
Thanks!

[Skyvr]

Sorry I should have provided that, the site is https://arthurk.me. I have deactivated all plugins and still had the issue. I’ve provided login credentials for an admin account in a secure note.

[thai]

Hi @Skyvr,

There is a conflict with The Grid plugin, to fix this issue, please add the following CSS under Theme Options > CSS:

body .mejs-button button, 
body .mejs-overlay-button {
    margin: 0;
    border: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: inherit;
    text-align: center;
    vertical-align: top;
    background: none;
    color: rgba(255,255,255,0.5);
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-property: color, background-color, text-shadow;
}

Hope it helps