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

Store Design
, , , , ,
1

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.

3. Added the css.
  1. 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;
}
  1. 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 %}

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

2

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

3

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

4

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

Best Regards

Sahil

5

just any where?

6

Just above the tag

7

Didn’t worked.