Why doesn't my background video display properly in the Webflow designer with the correct height?
TL;DR
- Set the parent container's height (e.g., 100vh) to prevent it from collapsing.
- Ensure the video fills the container (width/height 100%, object-fit: cover, position: absolute with all sides set to 0).
- Verify layering with correct z-index and confirm video is in supported format under 30 MB.
- Refresh cache or reload the Designer to reflect updates.
Background videos in Webflow may not display at the correct height if their container settings or video file properties are misconfigured.
1. Check the Parent Container’s Height
- Ensure the parent element (div block or section) has a defined height or isn’t collapsed.
- If the container has no content other than the video and no height set (e.g.,
height: auto), it may collapse, making the video appear missing or very short. - Set a height manually (e.g.,
100vhor a specific pixel value) to force the container to maintain space for the video.
2. Confirm Video Element's Settings
- Select the background video element, and make sure its display is set properly (e.g.,
blockorflex) and width/height are100%. - Ensure position is set to absolute or relative depending on your layout needs, especially if it's meant to cover an area.
3. Adjust Object Fit and Positioning
- In the Style panel, use settings like:
- Object Fit: Cover (makes the video fill container while maintaining aspect ratio).
- Position: Absolute + Full (top/right/bottom/left: 0px) to stretch the video over the container.
4. Inspect Z-Index and Layering
- If the video doesn’t appear, it may be behind other elements.
- Set a higher z-index on the video container or lower on overlapping elements.
5. Check the Video File Format and Size
- Ensure the video file is under 30 MB, as required by Webflow.
- Use .mp4 format, which is supported. Other formats like
.movmay show playback issues.
6. Refresh Cache and Reload Designer
- Sometimes, video updates or style changes don’t reflect due to caching.
- Hard refresh (Cmd/Ctrl + Shift + R) or reload the Webflow Designer.
Summary
To fix incorrect background video height in Webflow, ensure the parent container has a set height, the video styling is configured with full width/height and object-fit cover, and the video file itself is properly formatted. Layering and caching can also affect visibility in the Designer.