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 video files on an external service (e.g., Dropbox, AWS S3) that supports download headers like
Content-Disposition: attachment. - Create direct download links and add them to your Webflow Order Confirmation Page using buttons or links with the
downloadattribute, optionally added via custom code.
To ensure that videos on your Webflow store automatically download when clicked (instead of opening in a browser), you need to control the file's behavior via server-side headers or use a workaround Webflow can support.
1. Understand Webflow Hosting Limitations
- Webflow’s native hosting does not support setting custom HTTP headers, like
Content-Disposition: attachment, which forces downloads. - Media files uploaded to the Assets panel are served through a CDN (Amazon CloudFront), making it impossible to modify download behavior there.
2. Use a Third-Party File Hosting Service
- Host your video files on a platform that allows you to serve files with the
Content-Disposition: attachmentheader. - Services such as Dropbox, Google Drive (with direct download links), AWS S3, or Bunny.net allow this capability when configured correctly.
3. Create Direct Download Links from External Hosts
- Once hosted externally, generate a direct download link that initiates the download immediately.
- For Dropbox:
- Share the file and replace
?dl=0with?dl=1at the end of the URL. - For AWS S3:
- Mark the file public and set the metadata to include Content-Disposition: attachment.
- For Google Drive:
- Use a third-party tool or direct API to generate a proper download URL (raw Drive links typically open in-browser).
4. Add a Download Button on the Order Confirmation Page
- In your Webflow Order Confirmation Page, add a Button or Text Link, and:
- Set the Link URL to the external download link.
- Set the attribute download (Webflow doesn’t support this natively but you can add it manually).
5. Use Custom Code to Add the download Attribute
If needed, inject code via the Page Settings > Custom Code > Footer section to add a
downloadattribute dynamically:Example:
Give your link a class like
download-linkUse this script in the page footer:
document.querySelectorAll('.download-link').forEach(link => link.setAttribute('download', ''));
Summary
To make videos download automatically on your Webflow store's confirmation page, host them externally with a service that allows setting download behavior, and link to them with the download attribute or forced-download URLs. Webflow itself can't control this behavior using its native hosting or asset manager.