Can I add an MP4 video to my website using code or a widget in Webflow without it being a YouTube video?
- Use the Background Video element to upload MP4 files under 30MB directly in Webflow.
- For more control, embed a custom
You can add an MP4 video directly to your Webflow site without using YouTube by using the Video element (for background videos) or by embedding custom code for more control.
1. Upload the MP4 File
- Webflow only supports uploading MP4 videos using the Background Video element.
- Go to the Add Panel (press A) and drag the Background Video component onto the canvas.
- Upload your MP4 file (max size 30MB) to that component for use as a background.
2. Use Custom Code to Embed <video>
If you want full control over the video (like controls, autoplay, mute options), you can embed code:
- Add an Embed element from the Add panel.
- Insert a basic HTML
<video>tag referencing your MP4 file. - You must host the MP4 file yourself (or use Webflow CMS file hosting):
- Upload to the Asset panel (max 10MB), CMS File field, or external hosting (e.g., AWS, Cloudinary).
- Get the URL of the uploaded file and use it in your
<video src="">.
Example (inline only):
Use <video src="your-video-url.mp4" controls autoplay muted playsinline></video> inside the Embed element.
Avoid using HTML if your audience needs accessibility or cross-browser fallback—MP4 doesn’t always guarantee full compatibility.
3. Hosting Options for Larger Files
- For files over 30MB, upload the MP4 to a third-party hosting provider like:
- Amazon S3
- Cloudinary
- Vimeo Pro or Business (if not using their player)
- Copy the public file URL and embed it using the method above.
Summary
You can add MP4 videos to Webflow without using YouTube by using the Background Video component (under 30MB) or embedding a custom <video> tag with a hosted MP4 file. For larger files, use third-party hosting and embed the video via Webflow's Embed element.