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

Answer 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 ...)

Answer 4

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

Answer 5

In the video source file you can simply change

controls= "false"

For the Safari CSS, which the native browser on ios, you can also try this hacky trick

.custom-video-controls {
  z-index: 2147483647;
}

Here's a link to a details discussion on managing/hiding controls on HTML 5 video

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

Answer 6

UPDATE OCTOBER 2021

All answers are outdated for iOS 13, 14, and 15. It appears because iOS low power mode prevents autoplay on all videos in the browser by default (to save power).

The best way to remove the annoying play button is to remove the autoplay tag on any video element and start playing the video when there is any user interaction.

React example below:

 <video ref={playerRef} playsInline >

let playVideo = (event) => {
   if (playerRef.current) {
      playerRef.current.play()
   }
}

Sidenote: the play button is hidden in a shadow dom that I am unable to figure out how to hide with external CSS modifications or even JS. If anyone has any ideas on how to hide a shadow dom element then that would be a better solution.

Answer 7

As of 20 Oct 2022,

My solution was to remove autoplay from the video element and use HTMLMediaElement.play() on page load. The promise returned from play() will catch any issues with playing the video, else the video will play as usual. My implementation in React looks like this:

useEffect(() => {
  ref &&
    ref.current
      .play()
      .then(() => {})
      .catch((err) => {
        // Video couldn't play, low power play button showing.
      });   
}, []);

This should be a relief from having to deal with the inconsistent Shadow DOM properties.

Resources:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Answer 8

Based on Ian's answer

video::-webkit-media-controls {
    opacity: 0;
}

This will hide all controls. Good for background videos that won't autoplay.

Answer 9

Today @2017 in iOS 10 this works:

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

Answer 10

For webapps. Works iOS 10.3 iPhone7 & Safari 10.1 on Mac as well. Thx to previous contributors. I had also the issue that the element does not contain any "control" attribute at all.

'<style type="text/css">'+
    '*::-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;'+
        '}'+
    +'</style>'

Answer 11

Try this:

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

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

Answer 12

Update:

IOS 13.*

  video::slotted::-webkit-media-controls-container{
      display:none !important;
      visibility: hidden!important;
      opacity: 0 !important;
     -webkit-appearance: none !important;
    }

IOS 14 changed selector to

:host::shadow::-webkit-media-controls-container{/* hide the element */}

helpful resource: html5rocks shadow dom 201

Answer 13

You can't remove the play button. This video placeholder always appears as the doc says : iPhone Video PlaceHolder. But maybe you can detect you're on an iphone and display an image with a link to your video instead of the video tag.

<a href="yourvideo.mp4"><img src="yourposter.png"/></a>

The video will be launched in a player just as a video tag.

Answer 14

According to this answer, in Google Chrome we can hide the big play button like this:

    video::-webkit-media-controls-overlay-play-button {
      display: none;
    }

That might be useful if you want to hide it on Android as well as on iOS.

Answer 15

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

Didn't work for me on iOS, but

*::-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;
}

Worked perfect!

Answer 16

Yes you can do this! The trick is to "hide" the video controls, by not adding the "controls" attribute to your video tag. Then you let it be dynamically added a few seconds after the video starts to play, by appending the "controls" property to the tag using Javascript. Simply set the value to "controls" and it will dynamically appear in the DOM... as if you had added the controls to your video tag's HTML. Adjust the timer as needed.

<video id="some-video-id" src="some-video-url" poster="some-thumbnail-url" />

<a href="javascript:void(0);" id="startVideoLink">Start the Video</a>

<script type="text/javascript">
    var oVideoTag = document.getElementById('some-video-id');
    var oLink = document.getElementById('startVideoLink');
    if (oLink && oVideoTag) {
        oLink.addEventListener('click',function(e) {
            oVideoTag.play();
            setTimeout(function() {
                oVideoTag.controls = 'controls';
            },2500);
        },false);
    }
</script>