Copy link to clipboard
Copied
How to remove the Play icon on iPhone/iPad when using video component?
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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!
Copy link to clipboard
Copied
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