Solved

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

mel30
Shopify Partner
98 2 24

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



Accepted Solution (1)

tim
Shopify Expert
3466 280 1286

This is an 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
});

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3466 280 1286

This is an 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
});

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
mel30
Shopify Partner
98 2 24

@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 🙂