How can I add an MP4 file to my Webflow site?
- Host your MP4 video externally (e.g., Amazon S3, Dropbox, or a video platform like Vimeo).
- Embed the video using a Webflow Embed element with HTML pointing to the direct .mp4 URL.
- Publish and test the site to ensure proper video playback across devices.
To add an MP4 file to your Webflow site, you’ll need to host the video externally or convert it into a supported embed format since Webflow does not support direct uploading of MP4 files.
1. Choose a Hosting Method for Your MP4 File
- External Hosting (Recommended): Upload your MP4 video to a hosting platform like Amazon S3, Dropbox, Google Drive (with public access), Bunny.net, or another CDN.
- Third-Party Video Platforms: Alternatively, use YouTube, Vimeo, or Wistia, which are designed for video delivery with optimization.
- Webflow only allows image, audio (limited), and document uploads directly — not raw MP4 files — unless you're using a custom code integration.
2. Embed the Video Using a Custom Code Block
Once your MP4 is hosted and accessible via a direct link:
Drag an Embed element from the Add panel into your Webflow page.
Paste the following HTML with your video’s direct URL:
<video width="100%" controls playsinline preload="metadata"> <source src="https://yourhost.com/yourvideo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>Make sure the URL ends in .mp4 and is publicly accessible.
You can also add attributes like
autoplay,muted,loop, andposter="your-thumbnail.jpg"as needed.
3. Publish and Test
- Publish your site using the Webflow Publish button.
- Check on different devices and browsers to ensure compatibility and performance.
- If the video doesn't play, confirm the MP4 URL works directly in a browser.
Summary
To add an MP4 in Webflow, host your video externally, then embed it using a custom Embed element with the correct HTML video tag pointing to the MP4 URL. Webflow doesn't support direct MP4 file uploads, so external hosting is essential.