DEV Community

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

Posted on

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

#webdev #css #safari #ios

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)