2

On iOS I can simply remove the play button by doing

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

However, on Android (using version 7.0) I can't remove the play button when trying the following.

video::-webkit-media-controls-overlay-play-button

video::-webkit-media-controls

video::--webkit-media-controls-play-button

Here's my video element: <video autoplay muted></video>

I could solve this natively, as shown here HTML5 video remove overlay play icon, but I'd prefer to do a CSS solution if possible.

For reference, this is what the Android play button looks like

enter image description here

D-Marc
  • 2,937
  • 5
  • 20
  • 28

1 Answers1

1

For anyone who comes across this question, an alternative solution to the native one is to simply not include android-webview-video-poster: in your Content Security Policy. This will block the image from ever loading in the first place. Not sure if this is considered a hackish solution, but it seems to work for me.

D-Marc
  • 2,937
  • 5
  • 20
  • 28
  • Definitely a hackish solution. I'm not comfortable possibly nuking my application from messing with CSP headers to accomplish this. Unfortunately I have to downvote this as it's not a CSS solution which is what the OP asks for. – Our_Benefactors Sep 12 '17 at 14:31
  • 1
    Understandable, everyone is entitled to their opinions. However, I am actually the OP and this is the only non-native way to do it, as far as I know. – D-Marc Sep 12 '17 at 16:24
  • Is there a specific meta tag that only removes this image? When I try this it removes the play button but also breaks a bunch of other assets in the app – SeanAye Aug 30 '20 at 02:49