This play Vimeo video on hover WordPress tutorial fixes the biggest annoyance with most hover-play videos, they restart from the beginning every time. Here, hovering out pauses the video instead of resetting it, all without writing any JavaScript.
Add and set up the Vimeo element
From the Add panel, drop in a Vimeo element and delete the regular video element it’s replacing.
In the settings panel, replace the placeholder with your video’s URL. Keep autoplay disabled, enable mute, turn off the built-in controls, and enable privacy mode.
In the Style tab, set both width and height to 100% so the video covers the area it’s placed in.
If you have an overlay and an icon sitting on top of the video, raise their Z-index so they stay visible above the Vimeo element instead of getting hidden behind it.
Play the video on hover
Select the div that contains the video, overlay, and icon, then add a new Hover interaction from the Interaction tab.
Select the Vimeo element and add a Player, Play action.
On the overlay div, add a Translate Y action set to 100% so it slides down and out of view, and shorten the tween so it happens quickly. On the icon, add an Opacity action set to 0%, matching the same duration.
Handle hover out
Duplicate the hover-in actions, then set the overlay’s Translate Y back to 0 and the icon’s opacity back to 100%.
Delete the Play action from the hover-out state so the video doesn’t restart, and add a Player, Pause action instead, so it picks up right where it left off the next time someone hovers over it.
Result
The Vimeo video now stays hidden behind an overlay and icon until someone hovers over it, then plays as the overlay slides away, and pauses, rather than restarting, the moment they hover out.