How can I make all of my visuals in a Webflow site, including looping videos and static images, scale responsively to window size changes while maintaining the 16:9 ratio and original margins between sections? I have tried inserting custom code into the head section, but it didn't work for me.
TL;DR
- Wrap each image or video in a Div Block with 100% width and 56.25% padding-top for a 16:9 ratio, and set the media to absolute position with 100% width/height and object-fit.
- Maintain layout spacing using margins or padding on Section elements, not on the visuals themselves.
To make all visuals (static images and looping videos) in your Webflow site scale responsively while maintaining a 16:9 aspect ratio and preserving original section margins, you need to use Webflow’s built-in layout and style settings rather than relying on custom code in the head section.
Here's how to do it correctly:
1. Use Div Wrappers With Set Aspect Ratio
- Wrap each image or video in a Div Block.
- Set the Div Block's position to relative, width to 100%, and padding-top to 56.25% (this maintains the 16:9 aspect ratio since 9/16 = 0.5625).
- Set the image or video inside the Div to position: absolute, top: 0, left: 0, width: 100%, and height: 100%, and set object-fit to cover or contain depending on your design needs.
2. Apply Consistent Margins or Padding Between Sections
- Design section spacing using padding or margin on the Section elements, not on the images/videos themselves.
- Use consistent spacing across all breakpoints to maintain the layout.
3. Upload Videos as Backgrounds (If Looping, No Controls)
- If you’re using looping videos without player controls, consider uploading them as video backgrounds in Webflow.
- Use a Div Block with Background Video, set its size to 100% width, and adjust its height using VW units or padding-top to maintain 16:9.
- Apply overflow: hidden if needed to crop excess.
4. For Image or Video Elements (Not Background)
- For static images and
- Add the media inside the same kind of aspect-ratio Div Block wrapper.
- Apply width: 100% and height: 100% to the media element, with object-fit: cover, as above.
5. Use Webflow’s Responsive Image Settings
- Ensure uploaded images are set to scale with the container (default behavior).
- Avoid setting fixed pixel heights on image or video elements.
Summary
Wrap every visual (image or video) in a Div Block with padding-top: 56.25% and set the media to absolute position with 100% width and height plus object-fit. Control section spacing via margins/padding on the surrounding Section elements. This maintains the correct 16:9 aspect ratio and layout responsiveness without the need for custom code.