HTML/CSS working on Chrome but not mobile or safari!

Design help Custom code
1

Hello ALL

I am strugggggling right now, long story short I need a video player that contains ONLY a mute/unmute button. I have successfully done this in chrome but the controls of the video still appear on safari and my phone (using chrome).

<video width="800px" height="400px" autoplay muted playsInline disablePictureInPicture controls controlsList="nodownload noplaybackrate">
  <source src="https://www.pennyflyentertainment.com/s/MelaVid_Smaller.mp4" type="video/mp4" />
  </video>


<style>
video::-webkit-media-controls-start-play-button {
  display: inline !important;
  -webkit-appearance: none;}
video::-webkit-media-controls-timeline{
  display: inline !important;
  -webkit-appearance: none;}
video::-webkit-media-controls-current-time-display {
  display: inline !important;
  -webkit-appearance: none;}
video::-webkit-media-controls-fullscreen-button {
  display: inline !important;
  -webkit-appearance: none;}
video::-webkit-media-controls-time-remaining-display {
  display: inline !important;
  -webkit-appearance: none;}
video::-webkit-media-controls-mute-button{
display: inline !important;
 -webikit-appearance: auto;}
video::-webkit-media-controls-seek-back-button {display: none;}
video::-webkit-media-controls-seek-forward-button {display: none;}
video::-webkit-media-controls-fullscreen-button {display: none;}
video::-webkit-media-controls-rewind-button {display: none;}
video::-webkit-media-controls-return-to-realtime-button {display: none;}
video::-webkit-media-controls-toggle-closed-captions-button {display: none;}
}



.buttons-container.left {display: none !important;}
.time-control {display: none !important;}

</style>

I tried inspecting the element and found what I think appear to be the correct selectors
Screenshot 2023-04-25 at 3.26.05 PM
to use css to hide them but it’s not affecting them at all no matter where I put the css.

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)