Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
});
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
});
@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 🙂
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024