Hi All,
I was trying to upload a background video but the quality seems to be greatly reduced once uploaded to Webflow. I was wondering if this is a problem with the video itself (i.e. export settings?) or something that I’m doing wrong on Webflow itself.
Any help is greatly appreciated!
Original Video file when played in QuickTime.
After Webflow upload.
Here is my site Read-Only:
Which page the video is on? No way to answer like this.
Sorry I’m inexperienced using the share link function. Here’s a link to the published site for the page in question. Thanks!
I am pretty sure that’s because the default encoding compression is set to medium-ish quality to make sure the videos are not too large. The video looks fine to me even if it is a bit lower in quality than the original.
Under the “read-only” you remove the video. Anyway, this is your video (1mb).
Your video width-height is 1200x630
But full-screen video (Desktop) should be 1900px ± (Like images, The “37% stretch/zoom” create a little blurry effect). This is not isssue of webflow (Save bigger dimension file).
1920px width example:
Perfect thank you so much! I’ll export a bigger version.
Keep in mind, bigger version > higher file size => slower site. A lot of sites use a little blurry video version (Not 1920 X 1080 but medium size).
Example:
https://y.co/
As @dram said: “The video looks fine to me”. If you want HD video maybe use another trick/idea (Like Youtube or viemo player).
Sounds good I’ll keep that in mind. Thanks for all your help!
So after playing around with different video sizes I discovered that when uploading the video to webflow it was compressing it during the transcoding process and then stretching it back out as @Siton_Systems was saying in the post above. As far as I can tell there is no way to prevent this loss of quality when uploading to webflow regardless of the actual video size, so I started to explore different options.
Turns out, you can upload videos to Dropbox and use it as a host for the video. You can then use the video link from the Dropbox file and put it in an HTML5 video embed. This method causes no loss in quality and you can size it much easier than a background video element anyway.
With that being said I would love to see Webflow build in a feature that lets us upload videos directly as assets because this is a rather tedious workaround but it does at least work.
I would also like to see quality settings on video uploads. I have made my website with video for my business name/logo and it needs to be a bit sharper on wide breakpoints. The video is 1920 pixels wide. See: penninewebsites.com
hi, how do you set up the video to autoplay and loop in this case?
For anyone coming along this thread. This example has all the code and instructions you need to copy and paste into your site very easily. And the videos even preview in the designer 
