Webflow sync, pageviews & more.
NEW

How can I embed a video from Dropbox on my Webflow site and ensure it works in Firefox and Safari?

TL;DR
  • Upload your video to Dropbox, create a share link, and modify it to a direct download URL using dl.dropboxusercontent.com.
  • In Webflow, add an Embed element with an HTML5 <video> tag using the direct link, ensuring it includes type="video/mp4" and attributes like playsinline, muted, and loop for browser compatibility.

To embed a video from Dropbox on your Webflow site and ensure compatibility with Firefox and Safari, follow the steps below to get the correct link and use an HTML Embed with video tags that work cross-browser.

1. Upload Video to Dropbox

  • Upload your video file (e.g., .mp4) to your Dropbox account.
  • Right-click the file and select "Share".
  • Click "Create link" (if not already created), then click "Copy link".
  • Dropbox share links don’t stream by default and open in a Dropbox viewer.
  • Convert the link to a direct download URL by replacing www.dropbox.com with dl.dropboxusercontent.com and removing ?dl=0.

Example:
Original:
https://www.dropbox.com/s/abcd1234xyz/video.mp4?dl=0

Convert to:
https://dl.dropboxusercontent.com/s/abcd1234xyz/video.mp4

Note: Large videos may not load due to Dropbox’s download size/traffic limits.

3. Embed the Video in Webflow

  • In Webflow, drag an Embed element onto the canvas.

  • Add the following code using the new Dropbox URL:

    `

    Your browser does not support the video tag. \`

  • Ensure the type="video/mp4" is included. Firefox and Safari rely on this to determine video compatibility.

4. Browser Compatibility Considerations

  • mp4 (H.264/AAC) is widely supported across all major browsers.
  • Add attributes like preload, playsinline, muted, loop depending on desired playback behavior.
  • Safari on iOS may block autoplay unless the video is both muted and playsinline.
  • Firefox may block auto-play depending on user settings — use controls to ensure the video can still play manually.

Summary

To embed a Dropbox video in Webflow with full browser support, convert your Dropbox share link to a direct URL, use the HTML5 <video> tag in Webflow’s Embed element, and ensure the video uses the MP4 format with proper attributes for Safari and Firefox compatibility.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I remove the e-commerce functionality from my Webflow clone with CMS capabilities?
How can I create a GA4 Event to track form conversions using Webflow, Google Tag Manager, and Google Analytics 4?
What is the issue with the Safari browser action bar on iPhones and iPads when using a full screen home page created with the Webflow platform?
Why is my Webflow slider not working as intended when I try to link to a specific slide using the created links?
Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
Can I change the position of an object in Webflow to be relative to a specific element instead of the body?
What could be the issue if my Webflow site with SSL enabled is showing a "Fastly error: unknown domain" message, even though the www domain is correctly registered in the hosting tab?
How can I change the map location or coordinates in the code using Webflow map clone?
How can I make a responsive full screen Lottie animation with Webflow?
Is Webflow still compliant for European freelancers/agencies if websites are hosted on US servers? How can we make our European-made Webflow sites compliant with European privacy rules?
What shopping cart/eCommerce recommendations have you seen work well with Webflow apart from Shoplocket?
Can I create a breaking news section like UFC champion Miesha Tate's website on Webflow without any programming knowledge?
How can I create separate URL links for each tab in Webflow?
Can the order of items in the CMS be changed in Webflow?
Is there a way to style dropdown forms in Webflow? I have tried adding a class and styling as normal, but have only had minimal results.
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?