I must start by thanking the wonderful Webflow team for yet another incredibly powerful feature that’s giving us even greater freedom over the design process: Video Backgrounds. The tool not only lets us upload and host the videos (goodbye Dropbox, complicated S3 buckets, and Vimeo Pro subscriptions). The transcoding process is seamless. MP4 and WEBM? Come on. Brilliant!
A Bug I found:
Massive video posters
Video posters, for those who aren’t aware, are described as the following:
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. —W3Schools poster description
In the current implementation, we have some major challenges that affect performance and usability:
A poster element is automatically generated by Webflow, presumably from the first frame of the video, and stored on Cloudfront.
For my test video, a 5 MB MP4 from Sample-Videos.com, Webflow generated a PNG file for the poster that was over 1.7 MB in size. The video itself transcoded to WEBM by Webflow and ends up around 3.8 MB.
Browsers like Chrome and Safari automatically download the poster element, regardless of whether or not that element is displayed. In this case, that means a massive, 1.7 MB PNG is thrown into the page load. That’s a HUGE performance killer.
Hi, interresting post! I have concerns too, I’m currently testing in order to check how good the compression of the other video formats are. So far so god, i’ll come back with results.
About this point 2, that’s interesting… I never heard of this, I may have put in production sites that do such a bandwith drain… how to check that, and most importantly, how to make a video background that doesn’t do that even in Chrome?
About the point 3: yes, not only ipad but mobile. On iPad, never a video bg will work, autoplay and loop. So a video bg element, to me, has to be hidden for everything not desktop. And sometimes you need to address the ipad landscape issue: ipad landscape breakpoint is the same than the desktop breakpoint so… it’s a tricky issue. If it’s a one pager, I usually use a script to redirect anything mobile to a mobile version. So yes, here, I’d really like to have a solution coming from Webflow.
The good: for now, the video bg widget is simple to use and the integration is quite good, the video is centered, which is hard to achieve by hands.
In the future, I’d like to be able to set my own resources, I mean all the various video files and the poster, because I usually spend a lot of time making them, lots or trial to get to the perfectly compressed versions of each, using professional tools and all my experience in the domain. Also, depending on what the video content is, I don’t compress it the same way. And depending if the video has to be seen as a video, or if it’s only a “pattern” in the background, I don’t use the same output size. I’d like to control all this.
Hi @McGuire, thanks for following up on this. The issue is still open, however an update will be coming that addresses the issue. As soon as there is more info, I will happily update the post to let you know.
I’ve just used the background video component for the first time. As usual, its a great one-stop, quick-to-implement feature from webflow
I’ve run into similar issues with the poster frame described by @McGuire.
I also second what @vincent says – ideally, I’d like to be able to choose my own poster frame – and for the similar reasons: lots of care goes into choosing and optimising the poster frame which is seen while the video is loading – this is not necessarily always the opening frame. Having control over this would be great.
@McGuire@vincent@matt50 just wanted to touch base here - we’ve fixed the large poster size issue and working on custom poster images next (although, no eta on when it will be ready)
More updates to come! In the meantime, can you please take a peek at your sites with BG vids and confirm if the poster images are a better size than before?
More info on this when available