How can I disable autoplay and enable hover-based play for background videos in Webflow?
TL;DR
- Replace the background video with a standard video element from the Media panel.
- Disable autoplay in settings or use query parameters for YouTube/Vimeo links.
- Use Webflow Interactions to trigger play on hover and pause on hover out.
- Ensure the video is muted if necessary via hosting settings or the
<video>tag.
Webflow automatically plays background videos on page load, but there isn't a built-in option to trigger playback on hover. However, you can achieve this effect using a standard video element and custom interactions.
1. Use a Video Element Instead of a Background Video
- Remove the Webflow background video component.
- Add a Video element (from the "Media" section in the Add panel).
- Upload your desired video or use an externally hosted video URL.
2. Set the Video to Not Autoplay
- Uncheck any "Autoplay" settings in the video options.
- If using a YouTube or Vimeo link, append query parameters to prevent autoplay:
- YouTube:
?autoplay=0&mute=1&loop=1&playlist=VIDEO_ID - Vimeo:
?autoplay=0&loop=1&muted=1
3. Create a Hover Interaction for Playback
- Go to the "Interactions" panel (lightning bolt icon).
- Create a new Mouse Hover animation:
- On Hover In: Add an action → Start Video Playback.
- On Hover Out: Add an action → Pause Video.
- Assign this interaction to your video element.
4. Ensure the Video is Muted (If Needed)
- Webflow automatically mutes background videos, but standard videos require manual control:
- If your video has sound, set it to muted within your hosting settings.
- If using custom HTML (for an uploaded MP4), add
mutedinside the<video>tag.
Summary
Replace the background video with a standard video element, disable autoplay, and use Webflow Interactions to trigger play on hover and pause on hover out.