Solved

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

sahilsharma9515
Shopify Partner
601 66 97

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Accepted Solution (1)

sahilsharma9515
Shopify Partner
601 66 97

This is an 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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Reply 1 (1)

sahilsharma9515
Shopify Partner
601 66 97

This is an 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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️