CODEWITHSUNDEEP
javascripthtml5-videomobile-safariagora.io
Claudio Valerio
Claudio Valerio

Reputation: 2342

iOS Safari 13: how to hide live broadcast controls in <video> element

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

enter image description here

Upvotes: 3

Views: 2744

Answers (1)

Igor
Igor

Reputation: 86

if i'm properly understood your pain, i suggest change approach a little bit. I had same problems in safari when open video tag to full screen, The solution is to expand the parent container of video tag instead. In this case, no native controls in full screen mode.

Upvotes: 3

Related Questions