Video to play on hover

Design help Animations & Interactions
1

Hi,

Does somebody know if there is a tutorial which shows how to create videos which play on hover as per this page Video | Webflow University

Ideally I would also like the video to open in a lightbox on click.

Thanks

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Yes! I want to know how to do this too. @sparky did you figure out how to do it?

3

Hey @sparky,

I’ll have to look into the auto-play on hover, but I can help you get started with the click to open light-box.

Take a look at this clients site for an example: http://lamberts.webflow.io/

This is basically a background video (webm) that sits inside a container (container-video)

image

The background video covers the whole container and is given a position: Relative
image

Because its position relative, we can put a light-box link in and cover the whole video. T

image

Here we can simply add our vimeo/youtube link and the lightbox will work as intended.

Hope that helps even a little

If I can find some time I’ll look at the hover play, but its definitely achievable with some basic custom code :slight_smile:

Thanks,

Tom

3 Likes
4

Thanks Thomas_92. I actually ended up using an animated gif as a looping background which is hidden by a still image. This still image hides on rollover revealing the animated gif which comes pretty close to what I was looking to achieve.

3 Likes