How can I make a hero video in Webflow automatically adjust size and maintain the 16:9 aspect ratio on tablet and mobile devices?
TL;DR
- Create a div wrapper with relative positioning, 100% width, and 56.25% top padding to maintain a 16:9 aspect ratio.
- Place the video absolutely inside the wrapper with 100% width and height, and use object-fit to control scaling; this ensures responsive resizing across devices.
To ensure your hero video in Webflow maintains a 16:9 aspect ratio and automatically resizes across devices, you need to use a responsive container technique with padding.
1. Set Up a Responsive Wrapper
- Add a Div Block to the Hero section and give it a class name, e.g.,
VideoWrapper. - Set the position to relative.
- Set the width to 100%.
- Set padding-top to 56.25% (this is 9 ÷ 16 × 100%, the 16:9 ratio).
- Do not set a height — the padding controls the height based on width.
2. Place the Video Absolutely Inside the Wrapper
- Drag your video element (either a Video or Embed component) inside the
VideoWrapper. - Set its position to absolute, with values:
- Top: 0
- Left: 0
- Width: 100%
- Height: 100%
- Set object-fit to cover or contain, depending on the design goal:
- cover fills the space, cropping if needed.
- contain fits the full video inside the area, adding letterboxing if necessary.
3. Configure for Responsiveness
- This setup scales the video automatically on tablet and mobile.
- You do not need to create separate breakpoints unless you want to tweak styles (e.g., margin or spacing).
4. Optional: Lazy Load or Loop (For Performance)
- If using the Embed block, add:
loading="lazy"to the<iframe>for performance.?autoplay=1&mute=1&loop=1&controls=0on YouTube/Vimeo links as needed.
Summary
Wrap your video in a relatively positioned container with 56.25% top padding and place the video absolutely inside to maintain a 16:9 aspect ratio across all screen sizes. This approach keeps the hero section responsive and consistent on tablet and mobile devices.