To get video URL from Dropbox…

1. Upload to your Dropbox account
2. Create a share link. You should get something like: https://www.dropbox.com/s/tfepjt62veg9/SizzleReel_Finalmp4.mp4?dl=0
3. Change the www.dropbox.com to dl.dropboxusercontent.com
4. It should look like this now: https://dl.dropboxusercontent.com/s/tfepjt62veg9/SizzleReel_Finalmp4.mp4?dl=0
5. Add the following code to an embed on your page

<video class="wb-video-styles-controller" wb-embed="video" playsinline loop muted autoplay style="background-image: url('');" data-wf-ignore="true">
	<source src="URL-GOES-HERE" data-wf-ignore="true"/>
</video>

1. Add a div block and give it a class wb-video-styles-controller
   1. Wrap it in another div and hide that div so that wb-video-styles-controller doesn’t interfere with any click events. Or give it pointer-events: "none" with some custom CSS.
2. Use this class to style your video element.
3. I like the below settings for a nice full screen video (nest it inside a div with height=100vh)

.video-controller {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

1. See the ”Control Embedded Video and Audio” Javascript section for controlling video playback and audio on user interaction.

Beware of Bandwidth Limits!

<aside> 💡

Keep in mind that the video will play while you work in designer, which will eat away at your data limits. I usually break the url while working just to prevent unnecessary data depletion.

</aside>

Notes on Hosting Options

<aside> 💡 Dropbox FREE plan is limited to 2GB of storage and with 20GB of bandwidth and 100,000 downloads per day. Make sure your client understands this before deciding to use Dropbox. Here’s a more official (non-forum) link on bandwidth limitations that I found: https://help.dropbox.com/share/banned-links

</aside>

<aside> 💡 I prefer to use Amazon Web Services (AWS) S3 Storage Buckets though the setup is a bit more involved. The free tier provides 5GB, 100 GB/month transfer limit, and 20,000 requests. Once you pass the free tier, the on-demand pricing is still very affordable and scales much better than Dropbox.

</aside>

<aside> 💡 Another option is Netlify which offers 100 GB/month but jumps to $55 per 100GB per month as soon as you tip that scale. Because of that jump, I’m not a huge fan of this option. Also, it’s designed for hosting websites and requires writing a small .html file to load the video asset.

</aside>