How to use high quality video with the BG video component

Hey guys,
I wanted to share a hack that I’ve found while trying to use a high quality video on webflow’s native video background component.
The problem that I had was that webflow’s automatically compressing the video to make the file smaller and by doing it they are downgrading the quality.

The solution is to use custom code and add HTML5 video tag that links to my own file, but then I had a problem with where to host the file.

The hack that I found was that after uploading the file to webflow’s video component you can actually still have access to the original file by clicking on the “open in a new tab” button on the designer (the little button after the file name):
39 PM

after clicking it I had the link to the original file hosted on Webflow’s amazon, and I used this link in my custom code.

It’s true that this is not 100% bullet proof (since I don’t have a link to a webm file), but that’s the best I could find without having to set up my own hosting for the video.

Enjoy!
Ran

6 Likes

Thanks for sharing @Ran_Segall… great find!

I am trying to use your method. In the designer, the embed-code-widget works fine, and the video plays. but on the published site it shows just a thumbnail :frowning:

Any ideas?

1 Like

Hi @Ran_Segall , do you have a video tutorial for this?

kind regards

I do not unfortunately…