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:
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: