How can I make the videos on my Webflow online store automatically download instead of opening in an in-browser video player when the user clicks on the download button on the order confirmation page?
TL;DR
- Host videos on external services (e.g., Dropbox, S3) that support direct download links and custom headers.
- Use anchor or button elements in Webflow with properly formatted URLs and add the
downloadattribute to trigger downloads instead of playback.
You want videos on your Webflow order confirmation page to download immediately when clicked, instead of playing in the browser. Webflow doesn't natively support forced downloads of media files, but you can achieve this behavior using specific file setup and linking strategies.
1. Host Videos Outside Webflow with Correct Headers
- Webflow's native hosting (CMS or Assets) doesn't allow custom HTTP headers needed to force file download (like
Content-Disposition: attachment). - Use a third-party hosting service like Dropbox (with direct download links), Google Drive (with proper link formatting), or your own server/hosting that supports downloadable links.
- Alternatively, use tools like Amazon S3 or Cloudflare R2, which allow custom headers and secure direct file access.
2. Format Download Links Correctly
- Ensure the link points to the video file URL directly.
- To make it a download, add the
downloadattribute to the anchor (<a>) element in Webflow: - Select the Link element, go to the Settings panel, and check “Open in New Tab” (optional).
- Then, in the Custom Attributes section, add:
- Name:
download - Value: (leave this blank or specify a custom filename, e.g.,
myvideo.mp4)
- Name:
3. Store Videos as Attachments (Optional but Recommended)
- If you're storing video links in the CMS, add a Text or Link field with the full URL to the hosted video.
- In the Order Confirmation template, bind that CMS field to the anchor link, and add the
downloadattribute manually for each dynamic link.
4. Avoid Webflow Video or Embed Elements
- Do not use Webflow’s native Video element or Embed video from YouTube/Vimeo, as those are built for in-browser playback.
- Use a Button or Link Block instead, tied to the direct file URL with the
downloadattribute.
Summary
To make video files download instead of play in-browser on a Webflow order confirmation page, host videos externally, link directly to them, and add the download attribute to your link elements. Avoid Webflow's video components and use downloadable links through plain anchor tags or buttons.