Subject: Hover Interaction with Video Player - Need Help

Ask the community
,
1

Hi Wix community,

I’m trying to implement a hover interaction with video players on my website, but I’m running into some limitations. Here’s what I want to do:

  • When a user hovers over a thumbnail, I want the corresponding video to play.
  • When the hover is removed, the video should pause and revert to the default video.

So far, I’ve set up the following:

  1. I have multiple video elements (#full1, #full2, etc.) and thumbnail elements (#thumb1, #thumb2, etc.).
  2. On hover over a thumbnail, the corresponding video should be displayed and played, and the other videos should be hidden and stopped.
  3. When the hover ends, the video should pause and revert to the default video.

Unfortunately, I’m having issues with the hover interaction. The video is playing on page load, but it doesn’t seem to trigger on hover for the thumbnails. Additionally, some videos are not responding correctly when trying to play or pause on hover.

I’ve tried different methods, but nothing seems to work consistently. Could it be a limitation of Wix or something I might be missing in my implementation?

Any help or advice would be much appreciated! Thanks in advance for your time.
you can view the link here https://rajviss.wixstudio.com/my-site-1/blank-1?rc=test-site
Best,
Rajvi

2

Hey Rajvi,

Just took a look at your website and saw the code you’ve used - there are multiple onReady functions and things in general are overly complicated than they should be.

Tip: Whenever asking a question related to the code you have written, always copy-paste it here ensuring it is properly formatted using </> so that other users can take a look at it and help you out with your queries.

Hiding / showing videos (and even images) on hover has not always been the most seamless and glitch-free experience when done with Velo. If you don’t have a specific requirement of playing each video from the very beginning when it’s thumbnail is hovered upon, I would highly recommend using the Hover Interactions in the editor itself instead of coding it with Velo.

You can have 3 containers and three video players stretched to full width, and have your default video inside of the background section. Then use Hover Interactions and set each container to Appear and set its initial transparency to 0% so that it is hidden by default and only appears on hover. Make sure that your containers are set to cover the full width and height of the background section, so as to hide the default video. Do this for all three of your videos and you should have a much smoother transition between videos and a lag free UX.

3

Hey Pratham, thanks for the quick reply and for checking the code out.

Totally hear you on the multiple onReady functions and overcomplication — I agree it’s messier than it needs to be. Appreciate the tip on formatting code when asking for help, will keep that in mind next time!

The main issue I’m facing is with the container hover trigger — it activates even when I’m not directly over the video area, which feels a bit off UX-wise. I love how Velo gives more control, but for this specific case, the hover-to-play interaction just isn’t behaving the way I’d like.

That said, your suggestion about using Hover Interactions in the editor sounds super helpful. I’ll try implementing it with layered containers and transparent videos like you described. Just one question — do the videos still autoplay smoothly on hover using that method? Because in my reference Tommas Quinn - Premium Framer Portfolio, the transitions feel super slick and immediate, which is what I’m hoping to achieve.

Thanks again for your help — this makes things much clearer!