javascript – How To Hide Video Controls In IOS Latest Version(17+)

Is there any way that I can hide the video controls on ios, I have added the video in the product gallery section in shopify, I have already tried few steps, but none of them have worked out.

1. Remove the controls from the video section of main-product.liquid, everywhere else as well, where the controls are mentioned.

2. Added the script in the theme.liquid file.

<script >
      var video = document.querySelector('#MainProduct-template--21546534895895__main');
      video.removeAttribute('controls');
  </script>

3. added the css in base.css file.

video::-webkit-media-controls {
  display: none !important;
  opacity: 0; 
}
video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

4. Added the id the video code and added the script in the theme.liquid.

{% if media.media_type == "video" %}
{{ media | media_tag: image_size: "720x", autoplay: true, loop: loop, preload: "none", id: myvideo, autoplay: true, height: "100%", width: "100%" }}
{% else %}

<script>
  document.getElementById('myVideo').addEventListener('play', function() {
    this.controls = false;
  });
</script>

In android and windows it is working fine, but in iphone it is still showing the controls is there a way through which we can hide it.

This is the url where I have added the video in product gallery.

https://bolderglow.com/products/glowscape-drawing-kit

Thanks