I wanted to save bandwidth on a website by hosting a .mov file on Dropbox.

When you browse to the file directly, it is not the raw version of the file. Instead it is decorated with share links, a sign in facility into dropbox and file details on the Dropbox page.

After uploading the file and making it publically accessibly in Dropbox. In order to be able to embed the file, the first thing we needed to do, was to be able to access the raw file without all the “decoration”.

I achieved this by editing the dropbox URL. The URL needed to change from this:

https://www.dropbox.com/s/32tdwcp70yan9fv/JENSKI.MOV?dl=0

To this:

https://dl.dropboxusercontent.com/s/32tdwcp70yan9fv/JENSKI.MOV?dl=0

By replacing https://www.dropbox.com with https://dl.dropboxusercontent.com we can access the file directly.

The final thing to do is to embed the file:

<video autoplay="autoplay" controls="controls" width="400">
   <source src="https://dl.dropboxusercontent.com/s/32tdwcp70yan9fv/JENSKI.MOV?dl=0" type="video/mp4" />
</video>

The Video File should now be embedded on the page.