Video autoplay on hover in the featured collection section

Technical Q&A
, , ,
1

Im working in the theme called Cascade - i need a video to autoplay when hovering over the first product picture, in the section “featured collection”

this is the webshop im working on:[ undabrand.com](http:// undabrand.com)

can anybody help me?

Thanks in advance

/Laurits

2

Hi,

Hope this will help

At featured-collection.liquid or similar look for the code that generates product images

Replace that with code which will load both the image and the video

Code example

Add javascript for autoplay (at theme.js or global.js or similar)

Code example

document.addEventListener('DOMContentLoaded', function() {
  var productMedia = document.querySelectorAll('.product-media');

  productMedia.forEach(function(media) {
    var image = media.querySelector('.product-image');
    var video = media.querySelector('.product-video');

    // Play video on hover
    media.addEventListener('mouseenter', function() {
      video.style.display = 'block';
      image.style.display = 'none';
      video.play();
    });

    // Stop video on mouse leave
    media.addEventListener('mouseleave', function() {
      video.style.display = 'none';
      image.style.display = 'block';
      video.pause();
      video.currentTime = 0;  // Reset video
    });
  });
});

use CSS to style the video

3

I cant find that bit in the code.. i’ve linked to a loom that showes the code

can you tell from there where i should replace?

https://www.loom.com/share/5567e2aac8a24621b1d76da17b8aa89e?sid=06febf45-956b-4c05-8577-a3759ebef614