Hi there,
On the homepage of my site I have a pre loader to act as a gentle fade into the background video but between the pre loader and the video appearing there is an awkward gap. Unfortunately, I couldn’t use the background video native to webflow because my video is over 1 minute long and the resolution needs to be 1920x1080 so containing that within the 30mb limit was a struggle… not only that but my client complained the quality at this size wasn’t good enough. Anyway I had to resort to an embedded Vimeo HTML link to display the video using the code below. However, I’d much prefer it if the preloader and video transitioned smoothly without the gap. I thought the point of the preloader was to load all the content in the background before displaying the page? Is there a solution out there? Much appreciated
.vimeo-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; } .vimeo-wrapper iframe { width: 100vw; height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ min-height: 100vh; min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Here is my site Read-Only: https://preview.webflow.com/preview/patty-bun?utm_source=patty-bun&preview=401aa94cffb5d0069b6bcde44811f330&mode=preview