Video autoplay on hover in the featured collection section

[Lauritsrs]

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 

can anybody help me?

Thanks in advance

/Laurits

[Small_Task_Help]

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

<div class="product-media">
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" class="product-image">
  <video src="{{ your_video_url }}" muted loop class="product-video"></video>
</div>

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

[Lauritsrs]

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