Re-Hosting Videos & Large Assets

One of the better strategies for reducing your bandwidth load is to re-host larger assets that receive heavy traffic.

Webflow's bandwidth reports are excellent for identifying these.

First, an overview of some important distinctions;

Videos & Webflow

Foreground v. Background Videos

• Foreground videos are your typical YouTube embed style video. The user initiates playback, and has controls to pause and seek the video.
  • Webflow's native approach is to store these videos on a service like YouTube, Vimeo, Loom, etc. via Embedly and it will embed their player. There are no Webflow hosting costs for these, but you may have costs or ads on certain platforms.
  • Custom hosting would mean hosting the video file on an external server, and placing a <video> element on your site. You'd generally set it so that controls are enabled, and/or you can use a special Javascript-based player like Plyr.js
• Background videos are for effect and contextual information. They generally autoplay and have no audio.
  • Webflow's native approach is to store these on Webflow hosting. Files are 30MB max and audio is stripped. It generates a <video> element which is generally set to autoplay, muted.
  • Custom hosting for bandwidth reasons is most valuable here. You also get the option to add audio, and store larger video files.

Video File Hosting v. Streaming

Broadly, there are two ways to host a video file-

• As a file. You'd simply host the MP4/MOV files and reference them with a <video> element. This is simpler, however the browser generally must download most/all of the file before it can be displayed. That can mean a delay before video begins playing.
• Via a streaming service. Here you upload your file and it is prepared specially for Internet streaming. Vimeo does this. The advantage is it will instantly begin playing as only a tiny bit needs to be downloaded. Especially good for larger videos.

Hosting Solutions

Cloudflare R2

This is Sygnal's current favorite. Cloudflare R2 is effectively free with 10 GB/mo free storage. It has free egress, so a million downloads costs nothing.  

In Webflow terms, 10 GB of video storage is ~ 300 max-sized Webflow background videos.  

R2 is object storage, so think "files", MP4s, PDFs, etc. For longer videos you'd want streaming which Cloudflare offers as a separate paid service, Cloudflare Stream.

Ideally your DNS is also on Cloudflare so you can do e.g. files.mysite.com as a subdomain.

Vidzflow

Made specifically for Webflow. I like what I see, but untested.

This is likely the best option for clients who need to the ability to add/update videos easily themselves.

Vimeo

Paid version gives you direct access to the video streams which lets you "instantly" begin playing video.

Others

• Bunny.net and Bunny Stream
• Digital Ocean Spaces
• Amazon S3
• Google Cloud Bucket

Background Video

Once you've hosted your file, h

Webflow's Backown Video and YouTube elements, and CMS Video field are not useful here.

Video Review

Where should I host?

• Background videos. Use a custom <video> element and host your video on;
  • Cloudflare R2
  • Vimeo
  • Bunny.net, etc.
• Foreground videos. If you

‍