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

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>

Answer 2

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 3

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 4

Try this:

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

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

Answer 5

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 6

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

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