How to hide video controls in ios latest version(17+)

[sahilsharma9515]

Hi there, 

Is there any way that I can hide the video controls on ios, I have added the video in the product gallery section, 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.

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

[sahilsharma9515 · Accepted solution]

Hi All, 

I have just found the solution for this issue. Adding the code that worked for me for future reference if someone will have the same issue.

document.addEventListener('DOMContentLoaded', function () {
  var videoElements = document.querySelectorAll('video');

  videoElements.forEach(function(videoElement) {
    videoElement.controls = false;

    videoElement.addEventListener('play', function () {
      this.controls = false;
    });

    videoElement.addEventListener('pause', function () {
      this.controls = false;
    });
  });
});

Please hit the LIKE whenever someone finds it helpful.

Best Regards

Sahil

[safakiko]

hi there, 
where should i paste that code mentioned above?

[sahilsharma9515]

Hi @safakiko you need to add this code in your theme.liquid file.

Best Regards

Sahil

[safakiko]

just any where?

[sahilsharma9515]

Just above the </body> tag 

[safakiko]

Didn't worked.