3

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

1
  • I have the same issue of hiding video controls. I'm running on Safari, iOS14.3 Commented Dec 25, 2020 at 9:15

1 Answer 1

3

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.

2
  • I came up with the same solution, but since it appears to be the only one, I'll upvote and set as correct answer to the question :) Thanks! Commented Apr 9, 2021 at 14:07
  • is there a proper solution for this? How can i hide the controls totally? also can I auto play the video?
    – Ram Pasala
    Commented May 20, 2021 at 7:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.