How to add a video to Webflow without YouTube (complete guide)

Webflow provides a native video element, which is handy for embedding videos from YouTube or Vimeo. But as soon as you want to self-host your videos, especially inside a CMS collection, the platform offers no built-in solution. It is a very common need: displaying a presentation video, a product demo or a testimonial without depending on a third-party platform.

Self-hosting your videos brings four concrete benefits. First, branding: no YouTube logo, no competitor videos recommended at the end of playback. Second, performance, provided the files are optimized. Third, full control over behavior: autoplay, looping, custom styling. And fourth, GDPR compliance, which has become a central issue for European businesses.

That last point deserves a pause. YouTube places tracking cookies on your visitors, even if they never press play. The direct consequence: if a visitor declines cookies in your consent manager, the embedded YouTube video simply does not display. A self-hosted video sets no third-party cookies: it displays for everyone, with no special consent handling. At BeBranded, a Webflow agency, this has become our default approach whenever a video plays an informative or aesthetic role. YouTube remains relevant only if your goal is to grow your channel and its engagement.

In short: to add a video to Webflow without YouTube, convert your file to MP4 and WebM, host both versions on an external service like Cloudinary, then display them with an HTML video tag inside an embed. You get a fast, GDPR-compliant, fully customizable video.

‍

Why use the MP4 and WebM formats

Cross-browser compatibility

Browsers do not all support the same video formats. For maximum compatibility, the right reflex is to provide both main formats. MP4, encoded in H.264 or H.265, works in Chrome, Firefox, Safari, Edge and almost every browser. WebM, encoded in VP8 or VP9, works in Chrome, Opera and Firefox, but its support remains uneven in Safari. By declaring both sources in the video tag, each browser automatically picks the format it can play.

Compression and quality

MP4 offers a good balance between compression and quality and remains the universal reference. WebM often goes further: at equal quality, the file is lighter, which translates into faster loading and reduced bandwidth consumption. On a Webflow site, where bandwidth counts against your hosting plan, that difference has a direct impact on your costs and performance.

GDPR compliance

This is the deciding factor for many businesses. An embedded YouTube video sets tracking cookies as soon as the page loads. Without the visitor's consent, it does not display at all, leaving an empty block in the middle of your page. A self-hosted video requires no third-party cookies: it is compliant immediately, with no extra configuration in your consent manager. For a company website, a portfolio or a landing page, it is the safest approach.

SEO and page speed

Google factors load speed into its ranking criteria, notably through the Core Web Vitals. A heavy, unoptimized video slows the page down and hurts your SEO. Conversely, a well-compressed WebM file, loaded lazily, preserves performance. Also think about the preload attribute and lazy loading so the video does not block the initial render of the page. Our guide on reducing bandwidth consumption in Webflow details these optimizations.

‍

Step 1: convert your video to MP4 and WebM

You do not need editing software to produce both formats. An online converter like Convertio turns your file into WebM or MP4 in a few clicks: upload the video, choose the output format, download the result. If you start from an MP4, simply generate the WebM version as a complement.

Use this step to optimize the file weight. Three levers matter: resolution (1080p is enough in most cases, 720p for a background video), duration (cut anything that does not serve the message) and compression bitrate. A few well-optimized megabytes will always look better than a raw 100 MB file that stutters while loading.

‍

Step 2: host the files on Cloudinary

Webflow does not allow direct MP4 and WebM uploads into the CMS. The simplest solution is to use an external hosting service like Cloudinary, which offers a free plan sufficient for most sites, with solid delivery speeds. Here is how to proceed.

1. Create a free Cloudinary account and log in to your dashboard.
2. In the Assets section, upload your two video files, MP4 and WebM.
3. Once the upload is complete, Cloudinary generates a public URL for each file.
4. Click each file and copy its direct URL: these are the two links you will insert in the code in the next step.

Your videos are now hosted externally, served quickly, and they weigh neither on your Webflow hosting nor on your bandwidth quota.

‍

Step 3: embed the video with the video tag

All that remains is displaying the video on your site. In the Webflow Designer, add an Embed component (HTML embed) where you want it, then insert an HTML video tag declaring both sources, the WebM version first, the MP4 version as a fallback:

<video class="video" width="100%" height="100%" autoplay loop muted playsinline>
    <source src="https://your-site.com/video.mp4" type='video/mp4; codecs="hvc1"'>
    <source src="https://your-site.com/video.webm" type='video/webm'>
</video>

Replace the example URLs with the actual URLs copied from your Cloudinary account. The attributes worth knowing: autoplay for automatic playback, muted to cut the sound (required for autoplay to work in most browsers), loop for looping, controls to display playback controls, and playsinline to avoid forced fullscreen on iPhone.

What about a CMS collection?

This is where the method becomes really powerful. Add two link-type fields to your collection, for example “MP4 video URL” and “WebM video URL”, and paste the Cloudinary URLs of each item there. In the collection template, use the same HTML embed and connect the CMS fields to it: every item in the collection then displays its own self-hosted video, without touching the code. The Webflow CMS handles the rest.

‍

Step 4: publish and test

Once the code is in place, validate the result methodically.

1. Publish your site: the HTML embed is not visible in the Designer, only on the published site.
2. Open the page in several browsers (Chrome, Firefox, Safari, Edge) to verify compatibility of both formats.
3. Test on mobile: the video must adapt to the screen and autoplay must behave correctly.
4. Measure the performance impact with Google PageSpeed Insights, before and after adding the video.

‍

Bonus: customizing the video with CSS

To style the video element (rounded corners, shadow, aspect ratio), add a few CSS rules in the page's Custom Code section, or directly in the embed:

<style>
.video {
    border-radius: 12px; /* Adds rounded corners */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.3); /* Adds a shadow */
    object-fit: cover; /* Ensures the video fills the container */
}
</style>

Adjust these values to match your website's design. And if you want to go further, with custom playback controls, a progress bar and buttons matching your brand, we detailed the method in our article on building a custom video player for Webflow, which works perfectly with the code from this tutorial.

‍

Conclusion

By embedding your videos with an HTML video tag rather than Webflow's native video block, you win on every front: behavior control, custom styling, managed performance and GDPR compliance with no consent handling. The method comes down to three steps: convert to MP4 and WebM, host on Cloudinary, embed via an HTML embed, including inside your CMS collections.

Four points to remember. Use both MP4 and WebM formats to cover every browser. Self-host your videos to avoid third-party cookies and consent-related blocking. Optimize file weight to preserve your website's speed and SEO. And customize the appearance with CSS for a clean visual integration. If you would like an outside opinion on your Webflow site's video performance, our team is happy to take a look.