I am trying to place a > 53 second long at 1920x1080p, so the video is too large to be used as a background video. When I crunched the video is detoraited the quality. What is the best way to add a video for the home page that can use a 54 second video and be clear and well spaced on all versions.
If you need to keep the dimensions of a video and stick to a certain quality, and have tried all the possible ways to optimize it, and if the video is still too large, then your only solution is to host the file on any other accessible server (from a ftp server to a dropbox link) and use custom code.
For custom code, there’s an easy way: upload a smaller version of the vid in Webflow, make it work like you want, inspect what’s published and grab the code. In the code, replace the video URL with the URL of the video you’ve hosted elsewhere and use that custom code in Webflow. In short, you’re making Webflow create the code for you.
You can explore halving the dimensions of the video: go for less size and better bandwidth. Then you can add a static transparent texture on top of the video, it gives a nice effect and masks the fact the video is lowres. Find textures here: www.transparentextures.com