Hide iPhone HTML5 video play button

Question

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

Is it possible?

Answer 1

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

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

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