Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

When the Hero Height Needs to Change Without Changing the Video

Field Note #155
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: When a video hero is too tall on mobile:
1. Identify whether the video is a background video.
2. Inspect the surrounding Cover block.
3. Check the Cover's minimum height.
4. Check whether the video itself is actually determining the section height.
5. Adjust the container before modifying the media asset.
6. Verify that the overlaid content still fits comfortably.
7. Test the hero at several mobile viewport heights.

Rather not untangle this yourself? Our Done-For-You team handles exactly this kind of thing, start to finish.
See DFY options →
Was this helpful? Thanks for the feedback!
The symptom
A video-based hero section needed to occupy less vertical space on mobile while still maintaining the background video and the content layered over it.
Simply treating the video as the thing that controlled the hero’s dimensions did not provide the desired responsive behavior.
Initial assumption
The first instinct can be to change the video itself when the hero feels too tall.
But the video is functioning as a background element inside the Cover. The section containing the video can therefore control the visual height independently.
Investigation
The mobile CSS targeted the WordPress Cover block when it contained a background video:
.wp-block-cover:has(video.wp-block-cover__video-background) { min-height: 400px !important; }
The change controlled the minimum height of the Cover rather than changing the video asset itself.
What to check
When a video hero is too tall on mobile:
1. Identify whether the video is a background video.
2. Inspect the surrounding Cover block.
3. Check the Cover’s minimum height.
4. Check whether the video itself is actually determining the section height.
5. Adjust the container before modifying the media asset.
6. Verify that the overlaid content still fits comfortably.
7. Test the hero at several mobile viewport heights.
Current finding
The mobile hero height could be controlled through the Cover container while leaving the background video implementation intact.
Troubleshooting lesson
When a background video appears to be causing a section to be too tall, don’t automatically modify the video.
First determine whether the container is controlling the section’s dimensions.
Background media and the element containing that media do not necessarily have the same responsibility for layout.

Tagged in :

More from the field