How to play video on mouse-hover

Need help
1

I’m wondering if someone can share with me how to play a video when mouse hovers over it.

Any direction and assistance will be much appreciated! Thanks in advance.

1 Like
2

You mean like a thumbnail video preview?

3

Not necessarily. Just looking for video playing when mouse hovers over

4

I believe @pork1977gm plugin does this.

5

Is there a way to do it without using paid plug-ins. I would think it would be as simple as setting up a hover condition but turns out its not that straight forward.

6

Are these YouTube or Vimeo videos? Or custom uploaded videos you have in your database?

7

custom videos. would it make a difference?

8

How are you making the videos play at the moment? are you using any existing free plugin to play them?
depending on what you’re using I could probably find a way to do it

9

There may be other ways but this one (louisforum | Bubble Editor) uses a bit of a hack.

The hack is to set a conditional on the HTML element for when “HTML A is hovered” then copy the expression to a “Do when condition is true” workflow event. You should delete the conditional on the element after copying the expression. This hack is necessary because it is not directly possible to set such a When expression in a workflow event.

Disclaimer: Bubble could plug this loophole in the future so use with that in mind. That being said, I believe many here on the forum have suggested and used it for other purposes and I assume that Bubble wouldn’t want to break people’s apps - at least not without fair warning.

By the way, you will need the Toolbox plugin or similar in order to run the very simple JS to play the video.

10

Here’s a way without the hack:

image
image697×663 36.6 KB

The JS code is:

var video2 = document.getElementById("video2");

// Play Video2 on hover
video2.addEventListener("mouseenter", function() {
  video2.play();
});

// Pause Video2 on hover
video2.addEventListener("mouseleave", function() {
  video2.pause();
});
11

very helpful. thank you very much!

1 Like
12

I tried the non-hack way and it worked. I wanted to try out the hack method but I cannot get it to work. do you think you can explain to me how to do this hack.

Under workflow I tried to set only when to HTML hovered it doesn’t show up. Is it possible to run through the steps for me? Thanks!

13

@et.wuzz , the hack is described here.

14

thanks. figured it out. didn’t know you could copy conditions haha

1 Like
15

This topic was automatically closed after 70 days. New replies are no longer allowed.