Vimeo Background Vid not filling full section height

Design help Custom code
1

Hi, first time forum user.

I’ve read a bunch of forum posts about this topic and none of them quite fix my issue.
I have this vid on Vimeo which i want to use as a background to my Hero section.
The vid has a weird aspect ratio, don’t ask me why. That shouldn’t be a problem.

I’m using a section for my Hero element which contains 4 layers:

  • The title, text and button
  • a gradient layer black to transparant
  • the background vid (using an embed block)
  • a back-up background image in case the vid does not load
    I’ve tried several ways to get this vimeo vid to properly show.

The main issue i’m trying to solve:
I want the vid to act as though it’s a webflow vid or image with fit setting “cover”.
Meaning it fills both the full height and full width of the section (as a background should).

Just setting the fit setting to “cover” doesn’t work for embed element.
I’ve tried playing with width 100% and height 100% but this doesn’t give the desired result.
I’ve tried using code to position it properly, this almost worked, making it the desired width, but not filling the full height due to the aspect ratio.
Now i tried using vimeo’s recommended embed code, which gives me the same result.
Full width, not full height.

What i want to achieve is for the vid to fully fill the height and width of the section, meaning it will crop off the sides or the top/bottom to fill the full section.

Please give any advice you can give since i’m pretty much a beginner when it comes to webflow and especially coding.

Here is my site Read-Only: Webflow - DR-Logistics

2

There might be a way but I think you’ll struggle with this, because Vimeo’s embed code is designed specifically to never crop the vid. It will do everything to make certain that the vid fits, rather than covers.

You might instead be able to achieve this with Vimeo Pro, and a direct vid link, using a <vid eo> element. That might give you more HTML-friendly layout options because you do not have the IFRAME internally in the embed.

3

@memetican
Actually on the current version of this website which was built (not by me) in Wordpress they are using a direct vid eo link from Vimeo. Could you elaborate as to how this would work?
Is it similar to an iframe element but instead the code says vid eo [link] [style settings] /vid eo ?
Or is it a very different process?

4

There’s no IFRAME involved, you’d be creating an Embed with something like this.
You’d need to lookup the exact parameters for what you want, plus test the CSS for object cover.

<vid eo controls autoplay muted playsinline width="640" height="360">
  <source src="https://your-secure-vimeo-cdn-link.com/vid eo.mp4" type="vid eo/mp4">
  Your browser does not support the vid eo tag.
</vid eo>

You may just be able to copy the code chunk from your existing HTML as a starting point.

5

Okay this is the solution!
I used the following code:
Embed block

<vid eo autoplay muted loop playsinline class="vid eo-wrapper">
  <source src="https://player.vimeo.com/progressive_redirect/playback/1060838551/rendition/1080p/file.mp4?loc=external&signature=43448da710e261e983c50381c69346e5145c4fd6f3a1edc39b1d4edb0ede0610" type="vid eo/mp4">
  Your browser does not support the vid eo tag.
</vid eo>

Before body tag

<style>
.vid eo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
</style>

Thanks for the help!!
(The word vid eo has a space everywhere cuz the forum won’t allow that word for some reason ha)

1 Like