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.

To use a Dropbox-hosted video as a background in Webflow, you need to ensure (1) the video is in a compatible format, (2) the direct file link is accessible for embedding, and (3) your browser supports background video (Safari 9 has known limitations). Here’s how to do it:

​

1. Upload the Video to Dropbox

​

• Log into Dropbox and upload your video file (ideally in .mp4 format).
• After the upload, click Share on the file and then click “Create Link” if one does not already exist.
• Click “Copy Link.”
• The URL will look like:  

  https://www.dropbox.com/s/abc1234xyz/sample-video.mp4?dl=0

​

2. Convert the Link to a Direct Download URL

​

• To make Dropbox serve the raw video file, change the dl=0 at the end to raw=1.
• Example:

  https://www.dropbox.com/s/abc1234xyz/sample-video.mp4?raw=1

​

3. Add a Video Background Element in Webflow

​

• Go to the Webflow Designer and drag a Background Video element onto your page.
• Click the element and choose Replace Video.
• Webflow background video components only support <30MB files, and you must upload from your computer—not remote URLs like Dropbox—directly into Webflow.

​

4. Alternative: Use a Video Embed Instead (for Larger Files or External Hosting)

​

Safari 9 does not fully support autoplaying or looped background videos via custom code. If you still want to try:

​

• Drag an Embed block onto your Webflow page.
• Paste this inside the Embed panel, replacing <VIDEO_URL> with your Dropbox raw link:

​

  <video autoplay muted loop playsinline style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1;"> <source src="https://www.dropbox.com/s/abc1234xyz/sample-video.mp4?raw=1" type="video/mp4"> </video>

​

• Safari 9 may require muted attribute for autoplay, which is included above.
• You may need to test this on a modern browser; Safari 9 is outdated and may not support modern HTML5 video behavior reliably.

​

5. Optimize for Compatibility

​

• Safari 9 lacks support for some video autoplay and background behavior without user interaction.
• You may want to serve a fallback static image using a background image if the video loading fails.

​

Summary

​

You can't directly use Dropbox video links in Webflow's Background Video component. Instead:

• Convert the Dropbox share link to a raw direct link.
• Use a custom Embed block with HTML5 <video> code.
• Be aware that Safari 9 has limited support for background autoplay videos, especially if they're not muted or hosted on non-CDN services like Dropbox. For reliable playback, use Webflow’s built-in video hosting (under 30MB) or host externally on a CDN like Vimeo or Amazon S3.