Self hosted background videos to improve background video quality

Design help Custom code
1

Hello,

I’ve been through many similar threads to this one, but none of the options appear to work for me. Across the threads the conclusion appears to be to insert code such as the below:

<video autoplay loop muted style=”position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width:100%; min-height:100%; z-index: -1;”>

Your browser does not support the video tag.

Hosting the video externally on dropbox. This doesn’t work for me as the code doesn’t validate. See Below. Would be very grateful for help on this one as I have been going round in circles for months trying to improve the background video quality on Webflow, to no avail.

image
image1612×1286 121 KB

Thanks,
Joe

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Element requires and open and close tag. Also the “editor” is not always correct on formatting hints.

1 Like
3

Did you get this working. I’m trying to do the same thing!

4

Yes!

After many moons I’ve finally got this working.

<video autoplay loop muted style=”position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width:100%; min-height:100%; z-index: -1; src=“https://webmvideos.s3.eu-west-2.amazonaws.com/Nikeiceland+final+2.webm” style=“width:100%; height:100%”>

Is the code.

I tried using the Dropbox method of hosting but found it slow, so uploaded to an Amazon S3 bucket and now it’s super fast. Also converted the video into WebM; reducing the file size and retaining the quality.

5

One small hitch.

I can’t get my videos to scale larger than the video height (1080)

Any idea how i can get it to fill 100vh with the code above?

6

I’ve added this a wishlist request to have a toggle between compressed and non compressed video: Toggle switch for background video compression | Webflow Wishlist

Make sure to vote it up so we can get a better solution in the future.

7

Hi Joe

I am trying to do the same - can I ask you how much is the Amazon S3 per month. I went to their site, but find it very difficult to understand their pricing method. What was the size of your file? Are you happy with the solution, or do you find something even better to solve the problem.