When I upload a .webm as a background video element on my page, it looks like Webflow creates a .mp4 and .webm asset. My guess is that somehow the browser is supposed to decide which one to load, but I can only ever see it loading .mp4 (using chrome 107). What is the point of being able to upload .webm if .mp4 is always served? I would love to use .webm as the background video. Or am I just not reading the Chrome dev tools correctly?
MDN documentation says HTML video file loads “first one it understands,” which undoubtedly is .mp4 since it’s very well supported by modern browsers. Webflow background video element places .mp4 source first in the list, which is actually pretty standard convention according to Stack Overflow
It seems counter-intuitive to list .mp4 first to me as webm is “better” though less widely supported (lower file size for quality). I may be missing something here though?
I imagine the solution here is to use an embed, copy/paste the video code generated by Webflow background video element, but switch the source order so .webm comes first.
Interested to hear if anyone else had thoughts on this! Thanks again.
hi @learyjk I’m not expert on different video containers but after reading some articles it make sense to me why mp4 is placed first. read eg. here section 5
about quality
MP4 VS WebM: Quality
As for the video, how a video looks like is an important point that you may pay attention to. That is, how about the video quality? So, is WebM better than MP4 in quality?
The quality of WebM and MP4 is determined by the codecs. In general, the output of MP4 is high-quality. Of course, WebM can also offer high quality. But comparing MP4, it is a bit inferior.
Here we take two codecs - VP8 and H.264 as an example. Both VP8 and H.264 videos offer approximately the same quality at the same bitrate. But in recent years, H.264 has come out top among the codecs.
