Hosting Files in Dropbox

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.

1. Upload your file to dropbox
2. Hover over it in dropbox to see the Share button at the far right
3. 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}

3. 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;

‍

‍

‍

‍

‍

‍