6

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?

Community
  • 1
  • 1
Mishy
  • 97
  • 1
  • 2
  • 10

1 Answers1

20

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;
}
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42
  • What version? I have Android 7 and it doesn't work for me – D-Marc Jun 05 '17 at 04:35
  • This does't work for me either. Is there another solution? Preferably CSS – SeanAye Aug 30 '20 at 03:16
  • @SeanAye I can confirm this still works for me in the latest version of Chrome for Android (v85 on Android 10). Perhaps you're not using the native unstyled HTML5 video player, or the CSS isn't executing properly. I would suggest you connect your phone to a computer so you can debug the page in Chrome on the desktop, and be sure to enable the "Show user agent shadow DOM" setting in Chrome developer tools to see native media player controls. – Jon Uleis Aug 31 '20 at 04:13
  • Im using plyr which is a wrapper for native html5 video. Maybe this has something to do with it, will investigate further, thanks. – SeanAye Sep 03 '20 at 22:00
  • 1
    It appears the native shadow dom is in use and the css is set properly but the button still shows. See gist (image is wide you may have to scroll to see css) https://gist.github.com/seanaye/1a9b9bb9e789b7c0d30ef819721ae514 @JonUleis – SeanAye Sep 03 '20 at 23:36
  • @SeanAye That looks like evidence that the play button you're seeing might be part of Plyr, or a plugin/style you're implementing. I don't think the native one is a (blurry) raster image like that. Unfortunately I can't help further without accessing an in-browser demo. – Jon Uleis Sep 04 '20 at 21:27
  • @JonUleis If you are open to helping, I can add you to the google play beta if you pm your email address. If not I totally understand. EDIT: Forgot you can't pm on here. If you are open to helping email me at sean@wandrnow.com – SeanAye Sep 06 '20 at 16:56