How can I add an MP4 file to my Webflow site?

TL;DR
  • Upload your MP4 to YouTube/Vimeo and embed using Webflow’s Video element, or host the MP4 externally and embed it with a custom video tag in an Embed element.  
  • Style the video using a wrapped Div Block in Webflow’s Designer for layout and responsiveness.

To add an MP4 file to your Webflow site, you must host the video externally or convert it to a supported format. Webflow does not support direct MP4 file uploads for playback.

​

1. Understand Webflow Video Limitations

  • Webflow does not support direct MP4 uploads for playback on your site.
  • The Video element in Webflow only accepts YouTube and Vimeo links.
  • You can upload MP4 files to the Assets panel, but you can’t embed them directly for native playback.

​

2. Use the Native Video Element (with YouTube or Vimeo)

  • Convert your MP4 file by uploading it to YouTube or Vimeo.
  • Copy the video link.
  • In Webflow, drag in a Video element from the Add panel.
  • Paste the YouTube or Vimeo URL into the Video element settings.

​

3. Use a Hosted MP4 (for Custom Embeds)

If you want to use an actual MP4 file:

  • Host your MP4 file externally, such as:
  • AWS S3
  • Dropbox (with correct link formatting)
  • Google Cloud Storage
  • Any reliable file hosting service with direct MP4 URLs
  • Once hosted and you have a direct URL (ending in .mp4), use an Embed element in Webflow.
  • Paste the following in the Embed Code:
  • <video autoplay muted loop playsinline width="100%" loading="lazy"><source src="https://your-link.com/video.mp4" type="video/mp4"></video>
  • Adjust attributes (e.g., autoplay, loop) as needed.

​

4. Style the Video

  • Wrap the Embed element in a Div Block for better control.
  • Use Webflow’s Designer to position and style the container, such as for background video or inline use.

​

Summary

To add an MP4 file to Webflow, host the video externally and use an Embed element with a video tag, or convert it to a YouTube/Vimeo link and use the Video element. Webflow doesn't support direct MP4 playback natively.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Has anyone experienced a situation where a CSS class is being added to the Body tag upon page load in Webflow, which overrides the default site styling? The attribute being added is 'data-wf-spring-theme-render' with a corresponding value. Thank you.
How can I create a cookie alert message with a closing button on my website's homepage using Webflow?
How can I make a slider element in Webflow scale according to the elements within it, rather than being cut off on smaller screen sizes?
How can I fix the issue where the background image is repeated on scroll on mobile devices in Webflow?
How can I resolve scrolling issues with a dropdown list in Webflow, specifically with a 13" Mac screen that cannot scroll to the bottom of the list?
Is there a way to add custom code in Webflow to fix the issue of a play button appearing on the screen instead of autoplay for a background video in Safari and low power mode?
Can I move my Webflow project from a subdomain to a subfolder within a larger project?
How can I apply the same settings (such as cover and no-repeat) for CMS background images in Webflow as I do for other background images?
Is it possible to add a native cookie consent that appears only once on the first page load in Webflow? Can this be done using a modal wrapper in Webflow without any third party tools or integrations? If not, are there any suggestions or advice on adding a cookie consent to comply with European regulations?
How can I fix the issue of the sound of a YouTube video continuing to play in the background after closing a pop-up modal on my Webflow site?
How can I resolve scrolling issues with a dropdown list in Webflow, specifically with a 13" Mac screen that cannot scroll to the bottom of the list?
How can I create a simplified step-by-step guide for achieving a parallax background effect in Webflow?
Why does the background image appear on either side of the nav bar in my quote slider in Webflow, even though its width is set at 100%? Also, why is there a thin gray line along the top of the slide wrap?
How can I prevent my full-screen slider in Webflow from pausing when my mouse hovers over it?
How can I fix the issue where clicking on the next or previous pagination buttons on my Webflow blog shoots me back to the top of the page instead of staying on the section?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?