How can I ensure that the video maintains its dimensions of 1920x1080 on all breakpoints in Webflow?
TL;DR
- Wrap the video in a Div Block with 100% width and 56.25% padding-top to maintain a 16:9 aspect ratio, and set its position to relative.
- Place the video inside with absolute positioning (top/right/bottom/left: 0) and set width and height to 100% so it fills the wrapper.
- Ensure no conflicting styles or width restrictions exist on breakpoints, avoid fixed pixel sizing, and remove any height attributes from embeds.
To ensure your 1920x1080 video maintains its dimensions across all breakpoints in Webflow, you need to control the sizing and aspect ratio explicitly using Webflow’s layout and style settings.
1. Use a Fixed Aspect Ratio Wrapper
- Wrap the video in a Div Block and assign it a class (e.g.,
video-wrapper). - Set the width to 100% and the padding-top to 56.25% on the wrapper to maintain a 16:9 aspect ratio (1080 ÷ 1920 = 0.5625 or 56.25%).
- Set the position of the wrapper to relative.
2. Absolutely Position the Video Inside the Wrapper
- Drag your video element (or Embed code block if using custom embed) inside the wrapper div.
- Give the video the following style settings:
- Position: Absolute
- Top, Right, Bottom, Left: 0
- Width: 100%
- Height: 100%
This ensures the video always fills the wrapper, which maintains the 16:9 ratio.
3. Prevent Width Modification on Breakpoints
- Check all breakpoints (tablet, mobile landscape, mobile portrait).
- Ensure the video wrapper’s max-width is not overridden or limited.
- If needed, assign a max-width of 1920px to the wrapper on larger breakpoints to prevent excessive scaling.
4. Set Video to Scale Responsively
- Ensure video sizing is not set to pixel dimensions (e.g., 1920x1080) directly.
- Let the wrapper handle the aspect ratio, and the video will scale fluidly across breakpoints while maintaining 16:9.
5. Disable Auto Height (Optional)
- For embeds, remove any height attributes in the embed code to allow CSS to control size entirely.
- If using a video component, avoid setting the height in pixels.
Summary
To maintain a 1920x1080 (16:9) aspect ratio across all breakpoints in Webflow, use a padding-based wrapper with a 56.25% top padding and nest the video with absolute positioning. Avoid setting fixed pixel sizes and confirm no conflicting styles exist on smaller breakpoints.