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
- Modify the Dropbox URL to end with
?raw=1and embed it using an HTML5<video>tag withautoplay,muted, andplaysinline. - Add a Webflow scroll-in-view trigger with custom JavaScript to play the video when it enters the viewport.
Your Dropbox-hosted video is not autoplaying on the published Webflow site likely due to autoplay restrictions or improper embedding. Here's how to make the video autoplay when scrolled into view.
1. Understand Dropbox Video Behavior
- Dropbox links don’t serve raw video files suitable for custom controls or embedding the way native hosting or a CDN does.
- Dropbox file links often serve a preview page, not the video file directly, unless modified.
2. Modify Dropbox Link for Direct Access
- Change your Dropbox share URL from:
https://www.dropbox.com/s/yourfile.mp4?dl=0- To:
https://www.dropbox.com/s/yourfile.mp4?raw=1- The
?raw=1forces Dropbox to directly serve the video file.
3. Embed the Video Using Webflow’s Video Element or Custom Embed
- Webflow’s native Video element doesn’t support Dropbox URLs.
- Instead, use an Embed Component:
- Drag the Embed element into your Webflow page.
- Use a standard HTML5 video tag without the
<script>tag:- Example:
<video src="https://www.dropbox.com/s/yourfile.mp4?raw=1" autoplay muted playsinline preload="auto" style="width:100%; height:auto;"></video>
- Example:
- Important: You must include
mutedfor autoplay to work on most browsers.
4. Add Scroll-In-View Trigger for Autoplay
Because autoplay may not function on initial load, trigger video play when scrolled into view:
- Give the video element an ID, e.g.,
myVideo. - Go to Page Interactions in Webflow → Element trigger → While element is in view.
- Choose your video element (
#myVideo) and add an animation. - Under animation steps:
- Select Start an Animation → New Timed Animation.
- Add a Custom Code Action (with JavaScript):
- Use a short inline script:
document.getElementById('myVideo').play();
- Use a short inline script:
- This will trigger playback when the video enters the viewport.
5. Check Published Site Autoplay Compatibility
- Ensure the browser supports autoplay with sound disabled (hence
mutedis required). - Test on Chrome and Safari to confirm consistent behavior.
Summary
To autoplay a Dropbox-hosted video on scroll in Webflow, use the modified ?raw=1 link in a custom video embed with muted and autoplay attributes. Then, use a scroll-in-view interaction in Webflow to trigger video playback using JavaScript.