Add a video to your CMS Collection without using Webflow's native video element

Tools:

Video

1. Convert your video to WEBM and MP4 formats

Using WebM and MP4 formats for your online videos offers several benefits, including better browser compatibility and optimization for all search engines.

Browser compatibility

The MP4 format is widely supported by most browsers, such as Chrome, Safari, Firefox, and Edge. For its part, the WebM format is mainly supported by Chromium-based browsers, such as Chrome and Opera. By using these two formats, you ensure optimal compatibility with the majority of browsers used by Internet users.

Compression and quality

Both formats offer a good compromise between video quality and file size. The WebM format is based on the VP8 or VP9 video codec, which offers superior compression and quality similar to the H.264 used in the MP4 format. This way, your videos will have a satisfactory quality while being less heavy, which improves the loading time and the user experience.

Search engine optimization

Search engines, such as Google, place a great deal of importance on page loading speed. By using video formats that are efficient in terms of compression, you improve the loading speed of your site, which has a positive impact on your SEO. Additionally, by providing two different formats, you ensure that users will be able to play the video regardless of their browser, which contributes to a quality user experience.

Adaptability

WebM and MP4 formats are adaptable to different resolutions and bitrates, making it possible to offer videos adapted to the user's connection and device. This adaptability is critical to providing a smooth reading experience on mobile devices and lower-performing connections.

To convert your videos to the right format, I encourage you to use the tool Rotato Converter

2. Add this code in the field <head>of your page

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

Remember to put the links of your videos in the code instead of "video.mp4" and “video.webm”

3. Publish your site and test the result

Author photo
Sandro D.
Updated on
30/5/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
Add a video to your CMS Collection without using Webflow's native video element
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time