Remove transparent circle behind play / stop button in video block

Dear appreciated forum,

could someone help me please?

I am trying desperately to remove the background circle in the video block with custom CSS code – as close as it gets, the "circle" behind the "play / stop button" gets only transparent. I simply want it everything out, so only the stop and play element are remaining.

Here is my code:

/* Hide controls on native video player */

.video-player .plyr .plyr__controls {
  display: none !important;
}

/* Change symbol and background color of Play/Pause button */

.video-player .plyr__control {
  color: white !important;
background: none !important; }

Thanks a lot in advance for your help.

Can you share your website URL and this page?

@Ziggy Please find the URL here:

https://www.archivesoftheearth.com/archive

Thanks a lot in advance for reaching out

@Ziggy thank you very much, I just had to fix an syntax error, and now it is working on desktop. Unfortunately not yet functioning on mobile.

Would you be so kind and let me know, if there is a way to apply the code to both, desktop and mobile?

3 hours ago, ChristophMatt said:

fix an syntax error

Sorry, I see the bracket I missed!

Not sure why that wasn't working on mobile, try adding this:

.video-player .plyr--video .plyr__control--overlaid {
    background: rgba(0,0,0,0.0) !important;
}