How can I make my background videos in Webflow scale responsively while maintaining their 16:9 ratio and original section margins?
TL;DR
- Create a div inside the section for the video background, applying 16:9 ratio with 56.25% padding-top and position it absolutely.
- Embed the video using absolute positioning and object-fit: cover, while keeping original section margins and padding on the outer section.
To make your background videos scale responsively in Webflow while keeping a 16:9 aspect ratio and preserving your original section margins, follow these steps.
1. Use an Empty Div for the Video Background
- Instead of applying the video background directly to a section, create a div inside your section and use this as the video container.
- Set the parent Section with your desired padding/margins so it stays consistent.
- Apply position: relative to the section, and position: absolute to the video container if needed.
2. Maintain 16:9 Aspect Ratio Using Padding Technique
- Give the video wrapper div a class (e.g.,
video-wrapper). - Set the width to 100%.
- Set the padding-top to 56.25% (since 9 ÷ 16 = 0.5625).
- Set position: relative to this wrapper.
This padding-top creates a responsive box with a fixed 16:9 ratio.
3. Embed the Background Video Responsively
- Inside the
video-wrapperdiv, embed your Webflow Background Video element or<video>embed (via HTML embed). - Set your video element to:
- position: absolute
- top: 0, left: 0
- width: 100%
- height: 100%
- object-fit: cover (ensures the video covers the entire space while maintaining aspect ratio)
4. Maintain Original Section Margins
- Keep your margins and paddings applied to the outer section, not the
video-wrapper, to preserve your layout spacing. - If you're placing content over the video, create an additional content layer (div), positioned absolutely or relatively as needed.
5. Optional: Lazy Load or Optimize
- If using a
<video>element inside an Embed HTML block, you can add loading="lazy" to avoid performance issues. - Use compressed .mp4 files (~2MB or less) for best responsiveness and load times.
Summary
To make Webflow background videos responsive with a 16:9 ratio and retain section styling, use a fixed-aspect-ratio container via padding-top: 56.25%, embed the video inside this responsive div, and use absolute positioning with object-fit: cover. Be sure to keep layout margins/paddings on the section, not the video container.