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

TL;DR
  • Replace the Dropbox link's ?dl=0 with ?raw=1 to create a direct video URL.  
  • Use Webflow’s Embed element with an HTML5 <video> tag pointing to the direct link, ensuring the file is MP4 encoded with H.264.  
  • Include attributes like controls, autoplay, muted, and playsinline for compatibility, then test on Firefox and Safari.

To embed a video from Dropbox on Webflow and ensure compatibility with Firefox and Safari, you need to customize the Dropbox link and use a native Webflow video embed approach.

​

1. Convert the Dropbox Link to a Direct Video URL

​

  • Dropbox links by default do not serve videos in a playable format.
  • Change the shared link from this:
  • https://www.dropbox.com/s/yourfileid/filename.mp4?dl=0
  • To this direct download format:
  • https://www.dropbox.com/s/yourfileid/filename.mp4?raw=1
  • Replace ?dl=0 with ?raw=1 to make the file directly accessible as a video source.

​

2. Use Webflow’s Embed Element to Add Custom Video Code

​

  • In the Webflow Designer, drag the Embed component from the Add panel.
  • Insert a standard HTML5 video element like:

​

  `<video controls playsinline autoplay muted loop width="100%" height="auto">

    <source src="https://www.dropbox.com/s/yourfileid/filename.mp4?raw=1" type="video/mp4">

    Your browser does not support the video tag.

  </video>`

​

  • Make sure the .mp4 file is encoded using the H.264 codec, which is broadly supported on Firefox and Safari.

​

3. Optimize for Cross-Browser Playback

​

  • controls: Adds native play/pause controls.
  • playsinline and muted: Required for autoplay to work on iOS Safari.
  • autoplay and loop: Optional, based on behavior you want.
  • type="video/mp4": Helps browsers identify the format more reliably.

​

4. Test on Firefox and Safari

​

  • After publishing, open your site in Safari and Firefox to confirm:
  • The video loads and plays correctly.
  • Controls display and function.
  • If it doesn't work, double-check:
  • The link ends with ?raw=1.
  • The video codec is H.264 and AAC audio.

​

Summary

​

To embed a Dropbox video in Webflow that works in Firefox and Safari, convert the link to use ?raw=1, place it in a native video HTML element via Webflow’s Embed widget, and ensure it's properly encoded as MP4 (H.264). Always test in both browsers after publishing.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add a transparent background video like the one below to my website using Webflow? I'm currently experiencing issues with the uploaded WebM file having a black background.
How can the text color be changed for custom input fields on Webflow?
Has there been any recent updates to adding an audio section in Webflow without extensive coding?
How can I resolve the issue of the wave animation in my Webflow project de-syncing when the page is loaded for the second time?
Can I modify the heading styles in a rich text field in Webflow?
How can I make my fixed menu in Webflow invert colors when scrolling over sections and their images? I've tried using custom code but it doesn't seem to work.
How can I embed a Substack newsletter sign-up form onto my Webflow site using HTML? I've tried adding the code to the head tag following the instructions from the Webflow University article on custom code but it doesn't seem to be working. Any advice?
Is there a simple way to create equal height columns in Webflow, regardless of the content within each column?
How can I set a video background in Webflow that fills the screen vertically for all devices (desktop, tablet, mobile)?
Why does Webflow show a "failed to upload background video" error message and how can I resolve it?
How can I create a thumbnail image slider in Webflow without the lightbox feature?
What are the limitations of Webflow compared to other website builders like Elementor and Divi, and what features are most anticipated for its future development?
Can I duplicate a collection in Webflow to avoid manually replicating fields every time?
Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?
What is the process for creating classes of images for filtering in Webflow without using nested classes?
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?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?