Hide native play button for video in google chrome

Question

I'm trying to hide the default play button in the center of my video. I have a custom play button but the native play button is displaying underneath it on tablet and mobile. I can't access the CSS for it with either::--webkit-media-controls-play-button or ::-webkit-media-controls-start-playback-button.

I'm having the same issue as https://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome#= but I'm stuck on finding a similar solution.

Hiding the controls completely with the CSS below will work but I only want to hide the play button in this case.

video::-webkit-media-controls{
    display: none;
    -webkit-appearance: none;
}

Any ideas?

Answer 1

Took a bit of searching, but found it in the comments here and confirmed it works on Chrome for Android.

video::-webkit-media-controls-overlay-play-button {
  display: none;
}