The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
A developer explores how to recreate the 'squeezeback' broadcast effect—where live video shrinks to make room for graphics—using modern CSS Grid and WebVTT. The article demonstrates that browser-native layout tools can handle complex motion graphics without heavy JavaScript.
Why it matters
This technique offers a more efficient, performant way for web developers to implement professional broadcast-style layouts.
Confession: I did not care much about football as recently as May. But by the time España lifted the trophy last month, I was watching matches I had no stake in, still unable to explain offside.
Somewhere in one of those matches, I noticed what the picture on the screen sometimes did: the grassy pitch slides into one corner and scales down, and the space around it opens up and fills with a sponsor card, a second angle, or the studio desk. You don’t miss a moment of the game.
I'd seen that effect a bajillion times without really looking too hard at it. It's just what television does. But during one of my infamous 2am can’t-sleep iPhone research sessions, I learned it actually has a name: a squeezeback.
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in