100vw Vimeo Background Video with 100% Height

Design help General
1

How can I create a 100vw background video using a Vimeo embed, with a height that scales proportionally at 100%?

I’m taking the code from Vimeo’s Background Video article and I’ve found this tutorial that does a good job of explaining how to implement a video that’s 100vw and 100vh. However, I don’t want the latter.

I can very easily create this with the Video element and my Vimeo link (see this page of mine), but I need the embed so all controls are removed and it autoplays. The Vimeo embed doesn’t seem to react to styling for some reason unless it’s 100vw and 100vh. Super frustrating. Can anyone help?

Here is my site Read-Only: https://preview.webflow.com/preview/dan-kanvis?utm_medium=preview_link&utm_source=designer&utm_content=dan-kanvis&preview=4beb61bc52da88631af0a894af0e99dd&mode=preview

3 Likes
2

I’m also looking for an answer to this. Any chance you found a solution?

3

No, and based on the lack of responses I don’t think anyone has a solution. It’s such an odd problem. I’ll post here if I find any further info.

4

I have a solution for this.
Read-only link
Clone Link

Here’s how I created it:

  1. Create a full-width section
  • display set to flex with align center and justify center
  • position set to relative
  • overflow set to hidden
  1. Inside of that section put a video wrapper div
  • height: 100%
  • position: absolute (Auto all around)
  • width: 1000% (yes, one thousand) It can be less but this ensures it will be responsive on all screen sizes. Because this div is centered by the parent flexbox, it will stay centered even though the width is huge. Be sure to set the parent div overflow to hidden so this doesn’t move.
  1. Inside of that div, I have an HTML embed element
  • position: absolute (full)
  • width: 100%
  • height: 100%
  • insert the iframe code from Vimeo and set the inline height to 100% and width to 100%
  • here is the code I used:

Hope that helps!

12 Likes
5

Very simple and nice solution.
Thank you for sharing!

1 Like
6

@steviegriffin, nice solution, though the video is cropped and zoomed in too much!
What do you think can fix this?

7

Does it appear that way when you view the project in the Read-only link or Clone link above? Or are you trying to use a Youtube link? This method only works with Vimeo.

8

I had the same “zoomed in and cropped” problem.
Solved applying 56.25% padding bottom to Video Wrapper Div.

Hope it helps, this thread saved my day!

1 Like
9

Thank you so so much for taking the time to write this up and share the clonable. I’ve searched for days for such a clean answer. :pray:
Great tip with the 56.25% padding @carlos_av

10

It helped! Thank you so much!

11

This worked great on desktop - thank you so much! Displaying well on mobile, however, video is always blurry and cannot figure out why. Video has no problem loading and playing on desktop with the same internet connection as the phone. Would you happen to have any idea? Thank you in advance!

12

you save my life today, thanks!!!

1 Like
13

Amazing! this works and it’s very simple and clean. Thank you!