Cool video thumbnail question

Design help Animations & Interactions
1

Hey All,

On this website if you scroll down to the video in the middle of the page of a baseball player youll see a “red icon with arrow” similar to a youtube icon … that moves slightly from left to right to get the users attention…

Is there a way to do this on webflow? Im sure if it was a static image with a hover over yes… but what about an actual video…? or we would we have to do this on the player itself?

Thanks

2

Hi @mattmcs, thanks for the post. You can create this using a hover interaction, a more complex example is shown at interaction example #5 at http://interactions.webflow.io/. If you want to create a simple test case for this, we can help to provide some guidance on that :smile:

Cheers,
Dave

3

Hi there thanks Dave…

Would I be able to add to the hover over interaction on the video itself? like a vimeo video? or would it have to be on an image that then links to the video?

4

Hi @mattmcs, so do you want to be able to control the video also? If so, you would need to use the custom hover in conjunction with the vimeo api. If you just want to put an overlay on the video, you can do that, but you will still need to use the built in vimeo player start button.

You could also create a nice hover interaction on a lightbox that contains a vimeo video when the lightbox is opened. The thumbnail can be some nice image for the video with some overlay. Something else to think about…

Cheers,
Dave

5

Cool thanks,

Ya it would be great if I could add a overlay … so a interacation on say scroll that would make a video icon shake like it does on the link I sent above…

And then the when you click on the vimeo video the overlay would dissapear and you could play the video

6

Hi, yes exactly @mattmcs, you got the idea :slight_smile: The shaking part you can create some little animation effect using the hover interaction directly on the button image you plan to use :slight_smile: I would love to see it when you make it :slight_smile: Let me know if any issues…

ps… I have an example site you can clone, that demonstrates a hover action with overlay on a lightbox:

https://webflow.com/website/example-lightbox-hover

Cheers,
Dave

7

very cool thanks Dave will try this out !

8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.