How to add a video to your Webflow CMS collection without using the YouTube element

Webflow provides a native Video element, which is useful for embedding videos from platforms like YouTube or Vimeo. However, if you want to self-host your videos, Webflow does not offer a built-in solution.

Hosting and embedding videos directly on your site can be beneficial for:

• ‍Better branding (no third-party logos or recommended videos).‍
• Faster loading (if optimized correctly).‍
• Full control over video behavior (autoplay, looping, custom styling).‍
• Compliance with GDPR (General Data Protection Regulation), which is becoming a major issue for businesses in Europe and beyond.

‍

With recent GDPR regulations, embedding YouTube videos on a website has become problematic. YouTube uses cookies to track user behavior, and if a visitor does not accept cookies in the cookie manager, the YouTube video will not display.

This means that self-hosted videos are no longer just an alternative—they are becoming the standard for website compliance and user experience. Unless your goal is to increase views, likes, and engagement on YouTube, self-hosting videos is now the recommended approach for websites where the video’s purpose is purely informative or aesthetic.

‍

Why use MP4 and WebM formats for videos?

‍

1. Cross-browser compatibility

‍

Different browsers support different video formats. To ensure maximum compatibility, it is best to use both:

• ‍MP4 (H.264 or H.265 - HEVC) → Works in Chrome, Firefox, Safari, Edge, and almost all browsers.‍
• WebM (VP8 or VP9 codec) → Works in Chrome, Opera, and Firefox, but is not always supported in Safari.

By providing both formats, your video will play regardless of which browser a visitor is using.

‍

2. File compression & quality balance

‍

• ‍MP4 (H.264) is a widely used format with good compression and quality, but WebM often provides even smaller file sizes with similar quality.‍
• WebM (VP9 codec) offers better compression, which means smaller files with faster load times and less bandwidth usage.

‍

3. GDPR compliance (why not use YouTube?)

‍

One of the biggest reasons to self-host videos instead of embedding them from YouTube is GDPR compliance. Here’s why:

• ‍YouTube places tracking cookies on visitors, even if they don’t interact with the video.‍
• If a visitor does not accept cookies in the cookie manager, the embedded YouTube video will not load at all.‍
• Self-hosted videos do not require third-party tracking cookies, meaning they comply immediately with GDPR and do not require complex cookie management.

Unless your video’s goal is to increase engagement on YouTube (likes, comments, and views), self-hosting videos is the best choice for company websites, blogs, portfolios, and landing pages.

‍

4. SEO and page speed optimization

‍

• Google considers page load speed as a ranking factor.‍
• Heavy, unoptimized videos slow down your website, negatively impacting SEO.‍
• Using WebM (which has a higher compression rate) can reduce file size while maintaining high quality.

‍

5. Mobile adaptability

‍

• Not all users have fast internet connections, especially on mobile devices.
• Both MP4 and WebM support adaptive streaming, allowing better performance on different screen sizes and internet speeds.‍
• Webflow does not support adaptive streaming natively, so using both formats ensures the best experience.

‍

Step 1: convert your video to MP4 and WebM formats

‍

How to Convert Your Videos Quickly

You can use online converters to transform your files into WebM and MP4 formats in just a few clicks:

• ‍Convertio → Upload your video and convert it instantly to WebM or MP4.

If you have an MP4 video and need a WebM version, you can easily convert it using the links above. Just upload your file, choose the desired format, and download the optimized video ready for Webflow.

‍

Step 2: embed the video using custom code

‍

Since Webflow does not allow direct uploads of MP4 and WebM files into the CMS, the best alternative is to use an external hosting service like Cloudinary. This tool provides a free plan, allowing you to store and retrieve your videos easily while ensuring fast loading speeds.

1. Create a free Cloudinary account

‍

• Go to Cloudinary and sign up for a free account.
• Once your account is created, log in to your dashboard.

2. Upload your video files

‍

• In the Cloudinary Dashboard, navigate to the Assets section.
• Click Upload and select your MP4 and WebM video files.
• Once uploaded, Cloudinary will generate a public URL for each file.

3. Get your video URL

‍

• Locate the uploaded video in your Assets list.
• Click on the file, and you will see a direct URL.
• Copy this URL, as you will need to insert it into the code below.

4. Insert the URL into the code

Once you have your Cloudinary video links, update the HTML code accordingly:

<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 https://res.cloudinary.com/your-account/video.mp4 and https://res.cloudinary.com/your-account/video.webm with the actual URLs from your Cloudinary account.

By using Cloudinary, your videos will be hosted externally, ensuring fast delivery without relying on Webflow’s limitations. Now, you’re ready to proceed with embedding the video in Webflow!

‍

{{blog_article_cta01}}

‍

Step 3: publishing and testing the video

‍

Once you have added the HTML video code to your Webflow page:

1. ‍Publish your site.‍
2. Open it in different browsers (Chrome, Firefox, Safari, Edge) to test compatibility.‍
3. Test on mobile to ensure the video scales correctly.‍
4. Check page speed using Google PageSpeed Insights to see how video loading affects performance.

‍

Bonus: customizing video with CSS in Webflow

‍

If you want to style the video element using Webflow’s Designer, you can add CSS in the Custom Code → Head section:

<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>

📌 You can adjust the CSS to match your website’s design.

‍

Conclusion

‍

By embedding videos using the HTML <video> element, instead of Webflow’s native Video block, you gain greater control over video behavior, styling, performance, and legal compliance.

‍

If you'd like to add a player to the video, with the ability to play, pause, view the video's progress, etc., we've done another article 'How to add a custom video player to your Webflow website'. Don't hesitate to take a look at it if you want to customize your videos, as this method works perfectly with the code we've made in this article.

‍

Key takeaways:

✔ Use MP4 and WebM formats for maximum browser compatibility.

✔ Self-host videos to avoid GDPR issues and third-party tracking cookies.

✔ Optimize file size to improve page speed and SEO.

✔ Customize video appearance using CSS in Webflow.