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:
posterattribute 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:
posterelement 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
posterthat 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
posterelement, 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.