Vimeo embed not filling full width

Design help Custom code
1

Currently the Vimeo embed for our Homepage masthead is causing major troubles. We’d like it to stay at full VW no matter the breakpoint, however at larger breakpoints, container background is appearing rather than the video expanding width. Below is the code used for the embed currently. Let me know if you have any further questions, and we’ll answer promptly.

/* Base setup */ .Home_Hero_Reel_Wrapper { position: relative; width: 100vw; height: 100vh; /* Default: desktop */ overflow: hidden; z-index: 0; } .Home_Background_Reel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; pointer-events: none; display: block !important; opacity: 1 !important; visibility: visible !important; background: #000; width: 177.78vh; /* 16:9 ratio width */ height: 120vh; /* match wrapper */ } /* Tablet (≤991px): 45vh */ @media (max-width: 991px) { .Home_Hero_Reel_Wrapper { height: 50vh; } .Home_Background_Reel { height: 50vh; width: 120vh; /* 45 × (16/9) ≈ 80 */ } } /* Mobile Landscape (≤767px): 40vh */ @media (max-width: 767px) { .Home_Hero_Reel_Wrapper { height: 40vh; } .Home_Background_Reel { height: 40vh; width: 100vh; /* 40 × (16/9) */ } } /* Mobile Portrait (≤479px): 40vh */ @media (max-width: 479px) { .Home_Hero_Reel_Wrapper { height: 40vh; } .Home_Background_Reel { height: 40vh; width: 71.1vh; } }

Here is my site Read-Only: LINK

1 Like
2

Hi there,

Webflow supports Vimeo video embedding, and videos will automatically adapt to their parent container dimensions. For responsive behavior across breakpoints, ensure your video container has:

  • A defined width and height (can be percentage-based)
  • Position: relative on the parent container
  • The video element set to position: absolute with top, right, bottom, and left set to 0
  • A defined aspect ratio using padding-top on the container (e.g., 56.25% for 16:9)

These settings will maintain proper scaling while preserving your container’s background properties across different screen sizes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Would love a community member to view this to make sure it’s correct!

1 Like