Streaming live at 10am (PST)

100vw Vimeo Background Video with 100% Height

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

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

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.

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!

4 Likes

Very simple and nice solution.
Thank you for sharing!

1 Like

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

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.