Search code examples
iphonehtml

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

  • 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;
}