How can I disable autoplay and enable hover-based play for background videos in Webflow?

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 muted inside 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.