VIDEO on mouse HOVER

[Mariuslupoiu]

Hello there.
I want to add video for products on mouse hover. I've watched a few YouTube videos but there is not much about it.
Currently I've tested with the second image as a .GIF file and it works, but the quality is very low.
I would like to add 1:1 videos into my products and have them switching to video on mouse hover.

Can you guys help me out? Is it related to code / or there is a trick to it?

As an example I added the container which is Custom content with three products showing.

[Roy-ロイ]

Hi @Mariuslupoiu !

Thanks for reaching out, and I'm excited to help you add videos to your product hover effect!

I totally understand your concern about the GIF quality, and I'm happy to report that I can definitely make this happen with a more elegant solution. However, it will require some code changes to get it just right.

Here's my initial thought process: we can add a unique identifier for each video resource in the Shopify admin, and then use that to showcase the video on hover. The trickiest part will be ensuring that we don't load all the videos for all product cards at once, as that could significantly impact site performance. To avoid this, we can implement lazy loading, which will load the videos only when they're actually needed.

I'd love to explore this further with you and come up with a custom solution that fits your needs. Would you be open to discussing the details and requirements a bit more?

Kind Regards, 
Roy