How can I auto pause a video when an image is selected?

[mel30]

Hello Experts,

Im not familiar with Java Script.

I have added a video to a product. When the video is selected it starts playing.

But when I select an image the video continues playing and its hidden

How can this issue be fixed

here is backup theme https://qsuwdl66mpm2fg7b-13017972795.shopifypreview.com

Video is added to this product https://www.athreyaherbs.com/products/organic-neem-leaf-powder-azadirachta-indica

Thank you for your support

[tim · Accepted solution]

this will require editing your theme code.

open assets/app.js (maybe app.js.liquid?) and find the following code (I see it starting at line 452):

$('.product_slider').flexslider({
     . . .
  start: function(slider){
    slider.resize();
  }
});

 (I've replaced some code with . . .  for brevity)

You need to modify it like this:

let stopAllVideos = function(slider) {
  let allVideos = slider[0].querySelectorAll('video');
  allVideos.forEach(v=>v.pause()); 
};
let startCurrentVideo =function(slider) {
  let activeVideo = slider.slides[slider.currentSlide].querySelector('video');
  if (activeVideo) activeVideo.play();
};

$('.product_slider').flexslider({
    . . . 
  start: function(slider){
    slider.resize();
    stopAllVideos();
  },
  before: stopAllVideos,
  after: startCurrentVideo
});

[mel30]

@tim Thank you so much this worked

Also is it possible to add a play icon on the video thumbnail

if yes could you please let me know how.

Thank you 🙂