Add a video to your CMS Collection without using Webflow’s native video element
Video
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a video to your CMS Collection without using Webflow's native video element.
1. Convert your video to WEBM and MP4 formats
Using WebM and MP4 formats for your online videos offers several advantages, including better browser compatibility and optimization for search engines.
Browser compatibility
MP4 is widely supported by most browsers, such as Chrome, Safari, Firefox, and Edge. WebM, on the other hand, is mainly supported by Chromium-based browsers like Chrome and Opera. By using both formats, you make sure your video works across most of the browsers people actually use.
Compression and quality
Both formats strike a good balance between video quality and file size. WebM is based on the VP8 or VP9 video codec, which offers better compression and quality similar to the H.264 codec used in MP4. That means your videos stay sharp without getting too heavy, which improves load time and the user experience.
Search engine optimization
Search engines like Google care a lot about page load speed. By using video formats that compress efficiently, you improve your site's loading speed, which has a positive impact on your SEO. Plus, by providing two different formats, you make sure users can play the video no matter what browser they're on, which helps deliver a better user experience.
Adaptability
WebM and MP4 can adapt to different resolutions and bitrates, which lets you serve videos that fit the user's connection and device. That flexibility is essential if you want smooth playback on mobile devices and slower connections.
To convert your video to the right format, I recommend using Rotato Converter
2. Add this code to the <head> of your page
Make sure you put your video links in the code in place of "video.mp4" and "video.webm"
3. Publish your site and test the result
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
