I'm developing a video broadcasting web application, and I'm struggling with some of Safari "features".
I'm required to remove the controls that Safari is exposing on the element on the client page (see attached screenshot below). My video element is coded like this:
<video id="video201"
style="width: 100%; height: 100%; position: absolute; object-fit: cover;"
autoplay=""
playsinline="">
</video>
As you can see, the "controls" attribute is not set, in order to have hidden controls: this is working correctly on Android Chrome, Edge, Chrome on desktop, Firefox, etc... The only one that's giving me headaches is Safari on iOS 13.3.
I can use javascript to manipulate video element.
I will REALLY appreciate any hint in the right direction on this.
Update 2020-04-16 So far I've tried some CSS found on SO like the one below, but without luck:
*::-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;
}