Dropbox can be used for hosting files, video and audio as well.
Setting Up Dropbox
Dropbox has this feature built in natively, however you must share your file, and modify that shared URL.
- Upload your file to dropbox
- Hover over it in dropbox to see the Share button at the far right
- Set the permissions to Allows viewing
Copy the link. which should look like this;
https://www.dropbox.com/s/dvd0gkxqxo8deov/Marcus-Aurelius-Meditations.pdf?dl=0
- Modify this link to replace the ending ?dl=0 with ?dl=1
You now have a link that can be used in your Webflow site.
Hosting Files for Download
One thing that this is particularly good for is downloading files such as PDFs. Dropbox is not designed as a hosting service, so it simply serves all files with an application/binary file type.
For files such as a PDF, that means that typically the browser will not try to open them. Instead it will see it as an unknown type, and give you the download option.
Demonstration
Demo project - https://hosting-files-ext.webflow.io/#demo-button
Cloneable - https://webflow.com/made-in-webflow/website/hosting-files-ext
Here's a working example of how that behaves with a PDF;
https://www.dropbox.com/s/dvd0gkxqxo8deov/Marcus-Aurelius-Meditations.pdf?dl=1
In some cases, you may also need to replace the www. with dl., but this does not currently appear to be required [ 15 Jul 2023 ].
Note, you can use this technique with a form as well, so that the file is delivered after the form is posted, using the redirect URL.
https://hosting-files-ext.webflow.io/#demo-form
Hosting Audio & Video on Dropbox
Uploaded audio & video files can use exactly the same approach. That url can then be used as a src in a video element that you place inside of a Webflow HTML Embed.
Video demo - https://hosting-files-ext.webflow.io/#demo-video
Audio demo - https://hosting-files-ext.webflow.io/#demo-audio
Also see Web Bae's blog post here on hosting background videos.
https://www.webbae.net/post/use-dropbox-and-javascript-for-better-videos-in-weblfow
Cloneable - https://webflow.com/made-in-webflow/website/dropbox-video
Audio Example Embed
Video Example Embed
This is currently my favorite working approach;
- Make certain to get the shareable link for your dropbox file
- It may include a key
- Reformat the URL as in the example below, everything after the /s/ will be your video ide, video name, and possible parameters
- Change the autoplay and loop settings as desired, you can also use controls to display the player controls
Additional notes for reference;
