How can I make a video hosted on Dropbox autoplay when it is scrolled into view on my Webflow site? The video currently only plays in the preview but does not autoplay on the published site.
TL;DR
- Convert Dropbox link to direct format (
dl.dropboxusercontent.com) and embed using a muted<video>tag inside a Webflow HTML embed element. - Use Webflow Interactions to trigger a “Play Video” action when the video scrolls into view.
You're trying to autoplay a video hosted on Dropbox when it's scrolled into view on your Webflow site, but it currently does not autoplay once published. Here's how to properly set this up.
1. Host the Video File Correctly
- Dropbox file URLs don't directly work for embedding video autoplay unless converted.
- Replace
www.dropbox.comwithdl.dropboxusercontent.comand remove any query string. - Example:
Original Share URL:
https://www.dropbox.com/s/abcxyz/video.mp4?dl=0
Correct Direct Link:
https://dl.dropboxusercontent.com/s/abcxyz/video.mp4
2. Use a Webflow HTML Embed Element
- Add an Embed element on the page where you want the video.
- Insert a basic HTML5 video element using the modified Dropbox link:
- Set attributes:
autoplay,muted,playsinline, andloop(autoplay won't work withoutmuted). - Add
loading="lazy"if desired. - Example inline use (no code block):
<video src="https://dl.dropboxusercontent.com/s/abcxyz/video.mp4" autoplay muted playsinline loop></video>
3. Trigger Playback on Scroll (Visibility)
- Native HTML5 video autoplay may still be blocked on load, especially if not in viewport.
- Use a Webflow interaction instead:
- Select the video element or container.
- Go to Interactions > Element Trigger > While Element is Scrolled Into View.
- Set an action to Start an Animation.
- Create a new animation and add a "Play Video" action.
- You must first select the video element inside the interaction panel.
- Save and publish.
4. Additional Tips
- Make sure the video element has muted="true"; otherwise, most browsers will block autoplay.
- Avoid linking to raw Dropbox share links—they are blocked for direct embedding.
- Test in published mode; Webflow preview may behave differently from live.
Summary
To autoplay a Dropbox-hosted video when it's scrolled into view, use a direct video link from Dropbox, embed it via an HTML embed with muted autoplay, and set up a Webflow interaction to trigger 'Play Video' on scroll into view. This ensures compatibility and browser autoplay support.
