Background video quality is too low

Hi!

I am trying to embed a full screen, responsive, looping, auto-playing, high quality background video for a site I am working on. Since the background video component offered in webflow compresses the video too much, I have tried embedding the video from vimeo instead. But the quality ends up being very low for mobile when embedded on the site in both Chrome and Safari. The quality looks better on desktop.

It also seems to be unstable. Sometimes better, sometimes worse. I’ve spent hours and I have tried other solutions that I’ve found in forums to get this to work, but with no success.

I tried the solution described here but the video is not showing up at all:
https://blog.prototypr.io/create-high-quality-background-video-in-webflow-f1c3e4ec4c9

I have exported the video in all kind of different sizes and ratios, including using handbrake to export a vimeo optimized format. I have also tried locking the video quality in vimeo to a high quality but it doesn’t change the result. The video looks great on vimeo but blurry as soon as embedded.

I have tested this with different users with different connections to make sure I am not having a connection issue.

Is there a solution for this that works and perhaps an embed code to use for something like this that generally works if I were to host my video elsewhere?

This is the code I am using to embed my video from vimeo:

Thank you,
Tage


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

Hey Tage, it sounds like you’ve done all the right things.

Phones browsers will generally be quite aggressive in choosing media for responsiveness rather than quality, so if you let the phone choose it will probably go for something lower-quality than you’d prefer. It does that for good reason- but in your case, it might not be suitable.

If you haven’t tried it, Vimeo Pro appears to have a special panel that lets you see the URLs of each individual video stream, at all of the size and quality variations Vimeo prepares. You can then select only the high definition stream URL. As far as I’m aware, if that’s the URL you use for your background feed, there isn’t any possibility of the mobile browser switching to a lower quality stream for performance.

That might be what you mean by “locking” the video quality- but if not, I’d try it.

Note that if it works, you’ll get hi-def video, but the tradeoff is a few seconds of delay in the page load. Be wary of the UX and SEO impacts.