The iOS Safari Full-Height Video Fix That Actually Works (After 4 Hours of Everything That Doesn't)

petermcclung — Wed, 14 Jan 2026 06:05:31 +0000

If you've tried to make a full-screen hero video work on iOS Safari, you've probably spent hours reading the same recycled advice that doesn't actually solve the problem. I just burned an afternoon on this, so let me save you the pain.

The problem: You want a background video that fills the entire screen on an iPhone. The bottom keeps getting cut off, or there's a gap, or the content below the fold is hidden behind Safari's toolbar. You Google it. You find 50 articles. None of them work.

What the internet tells you to try:

100vh — Too tall. Safari calculates this based on the viewport with toolbars hidden, not what the user actually sees.
100svh — The "small viewport height" that's supposed to fix this. Doesn't work reliably. Tried it. Multiple times. Different ways.
100dvh — The "dynamic viewport height" that updates as toolbars show and hide. Causes layout jank and still didn't solve our problem.
100lvh — The "large viewport height." Gets closer but still came up short on our iPhone 16 Pro Max.
-webkit-fill-available — Only works on WebKit, breaks Chrome, doesn't work when nested, and half the implementations out there are wrong anyway.
JavaScript solutions using window.innerHeight — Same problem. innerHeight gives you the current visible height, which is the short one. You're back where you started.
env(safe-area-inset-bottom) with viewport-fit=cover — Useful for padding content away from the notch and home bar, but doesn't fix the fundamental height issue.

I tried all of these. I tried combining them. I tried the "triple fallback" approach with CSS custom properties. I probably went through 10-12 iterations over three or four hours. The video kept coming up short on taller phones.

What actually worked:

.hero {
  min-height: calc(100lvh + 60px);
}

That's it. Make it too tall on purpose. Then adjust your content positioning to account for it — we bumped bottom-positioned elements from bottom: 15% to bottom: 25% on mobile so they sit comfortably in the visible area on initial load.

Is this elegant? No. Does it feel like a hack? Absolutely. But here's the thing: users don't see your CSS. They see whether your hero video fills their screen or looks broken. "Too tall" means they scroll past it by a few pixels and never notice. "Too short" means the first thing they see is a janky, cut-off hero that makes your site look amateur.

The web development community keeps chasing spec-compliant solutions that Apple keeps breaking with every iOS release. Meanwhile, the simple answer — just add some extra height and adjust your content — isn't anywhere in the search results because it doesn't feel like a "real" solution. But it ships. It works across devices. And it took 30 seconds to implement after we stopped trying to do it the "right" way.

If you're stuck on this problem, stop fighting Safari's viewport quirks. Make your hero too tall, push your content into the visible area, and move on. You've got better things to build.

I'm not claiming this is the best solution — just the one that actually worked after a frustrating afternoon. If you've found something cleaner that reliably works across iOS devices, drop it in the comments. I'd genuinely love to be proven wrong on this one.

That should do it. Good luck — hopefully it helps some people and maybe someone does have a better answer buried somewhere.

Update (Feb 2026):
After shipping this fix on multiple projects, I should clarify the window.innerHeight approach. It's not a failure — it actually works well when you need the hero to fill exactly the visible viewport (pixel-perfect). The reason I moved past it is that it returns the "short" measurement (with toolbars visible), so when Safari's toolbar auto-hides, the hero can feel slightly short. calc(100lvh + 60px) is the better choice specifically for video heroes where a little extra scrollable height is invisible to the user.

DEV Community: petermcclung

The iOS Safari Full-Height Video Fix That Actually Works (After 4 Hours of Everything That Doesn't)