How can I upload a Dropbox video and set it as the background on my webpage using Webflow? My browser is Safari 9, and I have been struggling with the code.
TL;DR
Upload your MP4 video to Dropbox, convert the shared link to a direct link using dl.dropboxusercontent.com, and strip URL parameters.
In Webflow, use a custom Embed element (not the Background Video block) to insert a
Style the video element with absolute positioning and ensure proper z-index layering; use H.264 encoding and mute the video for Safari 9 compatibility.
You're trying to use a Dropbox-hosted video as a background in Webflow, but your outdated Safari 9 browser is causing compatibility issues. Here's how to properly upload, convert, and use a Dropbox-hosted video as a background in Webflow.
1. Upload Your Video to Dropbox
Log in to Dropbox and upload your video file (ideally a compressed .mp4 file).
After uploading, right-click the video, choose Share, then click Create link.
Click Copy link. It will look something like: https://www.dropbox.com/s/abc1234xyz/video.mp4?dl=0
2. Modify the Dropbox URL for Direct Access
Replace the www.dropbox.com part with dl.dropboxusercontent.com
Remove everything after the file extension (e.g., ?dl=0) Example converted link: https://dl.dropboxusercontent.com/s/abc1234xyz/video.mp4
3. Create a Background Video Element in Webflow
In Webflow Designer, add a Background Video element by dragging it from the Add Panel.
Click on the background video element and upload a video file directly to Webflow, since Webflow does not support video URLs in background video blocks.
4. Use a Custom Embed Instead (to use Dropbox link)
Because Webflow’s native Background Video element does not accept external URLs, you’ll need to use a custom HTML embed instead.
Drag an Embed element from the Add panel to your desired section.
Paste this inside the Embed block (using inline editing, not raw HTML blocks):
`
\`
Set the parent div’s position to relative and the video’s position to absolute, full width/height, and navigation layers on top for layout control.
5. Safari 9 Compatibility Considerations
Safari 9 is outdated (from 2015) and lacks modern video autoplay and format handling.
To improve compatibility:
Ensure the video is encoded as H.264 in MP4 format.
Make sure the video is muted, as autoplay requires muted videos in Safari (some overrides also affect older Safari versions).
Add playsinline and loop attributes as shown above.
6. Optional: Use z-index to Position Other Content On Top
Set the video container to z-index: 0.
Other elements (text, buttons, etc.) should have a higher z-index and be in a relative or absolute container above the video.
Summary
To use a Dropbox video as a web page background in Webflow, you must create a direct download link from Dropbox and use a custom embed with a <video> tag, since Webflow’s built-in background video element doesn’t support external URLs. Ensure your video is in MP4/H.264, muted, and coded for autoplay compatibility with older browsers like Safari 9.
