Hide iPhone HTML5 video play button

I want to hide the big play button that appears by default on the <video> element

Is it possible?

Solution 1:

I don't have any iOS device handy to test, but perhaps try this:

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

Solution 2:

It seems Apple has changed the shadow-dom again.

In order to hide the play button control you must use the following CSS:

/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

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

Solution 3:

A look at the shadow DOM in Safari iOS tells me that what you want (hidding only the big central play button) is:

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

The answer from Ian hides everything including text tracks (closed captions ...)

Solution 4:

Newer iOS versions display such play button when the device is in "Low power mode".