I’m trying to get all the background videos on this page to play on hover and then pause on hover out. I know others have found solutions but I’m not great with JS and am struggling to replicate what’s worked for them.
The videos are at the bottom, under “Physical Prototype”
Read only: Webflow - Copy of Portfolio
Thanks in advance for any and all help!
Hello, In Webflow, there’s no built-in way to have a background video start playing on hover, although this can be achieved with a click. However, you can achieve this effect with a trick.
You can take a screenshot of the first frame of the video and set it as a cover image inside the hourglass.video.wrapper, then set the background video to display: none. Then, using Webflow interactions, specify that when the hourglass.video.wrapper is hovered, the image is hidden and the background video is set to display: block.
Of course, you should set the background video to autoplay in the settings so that it starts playing automatically when it is set to display block.
You can also set the same interaction for hover out, and the effect you want will be easily achieved.
hi @addisonpann from UX point of view is this approach unpractical because visitor will have to have mouse over video all the time to see full footage.
Use video instead that has this functionality (play - pause- stop) build in as @zafremedia mentioned
m2c
It also would never play on mobile devices where hover doesn’t exist.
After a bit of fiddling I got this to work. Thanks a bunch for your help!
Thanks for your input. The videos are only a few seconds long each, so hovering to see all the footage isn’t a huge concern of mine. The accompanying screenshots should provide enough context to understand the point even without hovering to view the videos.
I’ll include a play/pause option like @memetican suggested for mobile devices though.