Hello Shopify Fam, need help with product image activating into short videos while mouse hovers over

Highlighted
New Member
3 0 1

If you visit the following link - you will see when you hover over the image, it activates a short video clip of the product --- my client wants me to implement that to their Shopify account, does anyone know if their is a solution? Can I use shopify settings to do this or is their a 3rd party app? What is the best way to add this without having to use a third party? Thank you for your help. 

0 Likes
Highlighted
Explorer
38 8 15

Hey mate.

I don't know if there is an app for it, but it wouldn't be too hard to implement yourself. Looking at the inspiration website, they basically have a background image with a video over the top that has opacity: 0.

Then on hover, the video opacity is transitoned to 1 and the video is played using mouse enter JS event.

If comment was helpful, hit Like!
Solved your issue? Set Accept as Solution!
Need a quote? Contact glenn@plankcreative.com.au to get in touch!
0 Likes
Highlighted
Astronaut
1082 178 213

Hey @GoPatriots ,

I am not sure whether that is a 3rd party app, but that is totally doable without apps.

I actually did something similar recently. That is how I achieved it:

1. Add the <video> tag to the thumbnails in question with absolute positioning. 
1. a. Apparently the video file in this website is always the second product "image", but you can even use something like Advanced Custom Fields to allow your client to choose & upload his own video files to any product thumbnails he wants to.
2. On hover, find out whether the video is loading or not. There are a few ways to do it
3. Once it is loaded, add a class to thumbnail with opacity animation just like the website you showed us has. 

That is about it! I hope it helps.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes