Remove play icon in video component on iPhone/iPad

[jeppe dalkjærs50410158]

How to remove the Play icon on iPhone/iPad when using video component?

[Joseph Labrecque]

I'm going to assume this is an HTML5 Canvas document? That component leverages the UI dictated and delivered by the browser - so you'd have to ask Apple

[Joseph Labrecque]

Also though - if you disable the video controls completely, the browser perhaps will not show it - but then you must write all your own controls.

[jeppe dalkjærs50410158]

Thanks for you answer Joseph, I watched tons of your awesome tutorials at lynda.com

It is an HTML5 Canvas yes, and I completely removed the controls. The Play icon still appears because the video can't autoplay on the devices (iPhone, iPad, and I assume Android phones and tablets aswell).

As you see in the image above, this is the icon I wish to remove. Do you know of anyway to do this?

[ClayUUID]

But without a play icon, how would iOS users know it's a video? How would they play it?

Anyway even though this is a terrible idea, apparently it can be done:

Hide Video Play Button on iOS Devices | Web Programmer Blog

Hide iPhone HTML5 video play button - Stack Overflow

The video "component" just generates an HTML video element, so once it's onscreen you can use getElementById to grab it and tweak its styles/properties whatever as you see fit.

[jeppe dalkjærs50410158]

Hi Clay,

I know it seems odd, but whenever the video can't autoplay, I just want the "Poster-image" from to video component to show, like it does now, just without the play-icon. Thanks for the links, I will check it out!

[jeppe dalkjærs50410158 · Accepted solution]

Quick update: I simply linked a CSS to the HTML file and inserted this code:

*::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}

*::--webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

  display: none!important;

  -webkit-appearance: none;

}

Thanks for the help guys