Squeezeback en CSS Grid: Mux recrea el efecto broadcast

La técnica broadcast del "squeezeback" explicada en CSS puro

Una tarde bastó para reconstruir un efecto clásico de la televisión por cable —el video que se encoge en una esquina mientras el resto de la pantalla se llena con un anuncio, una segunda cámara o un intérprete de lengua de señas— usando solo CSS Grid, WebVTT y la librería de React Video.js v10 de Mux. Lo explica el equipo de Mux en su blog: el video no se transforma, no se mide en requestAnimationFrame y no se envuelve en un div escalable. Es una simple celda de un grid-template-rows que cambia sus fr mientras los paneles vecinos se hacen visibles.

Es una reorganización del DOM, no un truco de post-producción. Y abre la puerta al shoppable video, los videos donde el usuario compra lo que aparece en pantalla sin pausar la reproducción.

Cómo se hace, sin magia de post-producción

El truco está en display: grid con nueve celdas. La pista central lleva el video; las otras seis se colapsan a 0fr. Cuando un cue de WebVTT se activa, esos valores cambian y los paneles "estacionados" en las celdas laterales pasan a verse — el shrink y la revelación son el mismo evento.

👥 ¿Quieres ir más allá de la noticia?

En nuestra comunidad discutimos las tendencias, compartimos oportunidades y nos ayudamos entre emprendedores. Sin humo, solo acción.

👥 Unirme a la comunidad

Una sutileza técnica: row-gap: 8.9%. Los porcentajes de gap se resuelven contra la altura del contenedor, y a 16/9 eso deja exactamente 5% del ancho como margen superior e inferior. La aritmética existe porque cqw no funciona: el contenedor no puede consultarse a sí mismo.

Para el agendamiento, WebVTT hace de programador de layouts. Cada cue tiene una línea identificadora opcional que el equipo usa como "clave de producto", con el payload como layout. La línea de tiempo es un archivo de texto: un merchandiser puede reagendar todo el flujo editando un .vtt y CI puede regenerarlo por asset sin redespliegues.

El modo del TextTrack que importa es hidden. En disabled no dispara cuechange; en showing pinta subtítulos encima del video. hidden parsea cues y dispara eventos sin renderizar — perfecto para mover celdas de un grid.

Errores que cuestan horas

El post señala tres tropiezos concretos que cualquier founder que clone la implementación va a tener:

Las unidades fr solo interpolan correctamente si los totales del template coinciden entre origen y destino. Cambiar el total a la vez que el numerador hace que el video "se enrolle como en una caña de pescar".
@property falla en silencio. La skin default de Video.js resuelve todos los radios desde una variable, por lo que hay que animarla. Y los valores iniciales no pueden ser relativos (rem, %); escribir 2rem invalida la regla entera — hay que usar 32px.
hls.js borra los cues cada vez que se adjunta. Una pista creada con addTextTrack() no tiene un <track> al que recargarse y queda vacía en silencio. Mientras tanto, el workaround es construir los cues en archivo.

Iluminar la celda con el color del frame

Una vuelta de tuerca: estirar un <canvas> por detrás del escenario y blurrearlo. Eso baña el espacio revelado con los colores del video, replicando el efecto de las luces "bias" detrás del televisor.

El color de acento del botón de compra se extrae tratando el matiz como un ángulo en la rueda de color, no promediando RGB — promediar rojo, verde y azul da siempre el mismo oliva sucio porque el cielo brillante y las sombras oscuras se cancelan.

Funciona solo con crossOrigin="anonymous" y cabeceras CORS activas. En contenido Widevine o FairPlay los frames encriptados no pueden dibujarse en canvas; hay que capturar el throw del drawImage y caer a un gradiente estático.

El `cue` que se queda colgado de la pantalla

Detalle de UX que merece destaque: si el cue expira mientras un usuario está escribiendo en un campo del panel, el grid se cierra y el formulario desaparece bajo sus dedos. La solución es que el data-layout={cue?.layout} quede congelado mientras cualquier input del panel tenga foco; cuando se pierde el foco, el grid se "pone al día" con el reloj del video.

El form gana al scheduling. Es el tipo de decisión de producto que diferencia una demo de un producto.

El squeezeback no nació ayer: 40 años de historia

El post hace un recorrido por la prehistoria del efecto para anclar por qué es una novedad en la web:

Años 80: el hardware ya podía hacerlo — el Ampex ADO y las cajas DVE posteriores escalaban y reposicionaban señal en vivo, pero costaban tanto que el efecto quedó encerrado en post-producción.
Finales de los 90: los fabricantes metieron DVE en los character generators que ya estaban en la cadena de transmisión. El squeeze dejó de ser efecto especial y se volvió layout.
Finales de los 90-2000: las cadenas norteamericanas empezaron a apretar los créditos finales para arrastrar al siguiente show. Channel 4 lo cruzó al Atlántico, la BBC ya corría promo squeezes en vivo para el año 2000.
2000-2014 en deportes: TBS puso anuncios al lado de una carrera de NASCAR en vivo, el formato se durmió durante el siguiente deal de derechos, Turner lo revivió en Daytona entre 2007-2011, ESPN lo continuó con NASCAR Nonstop hasta 2014, Fox empujó el side-by-side durante los green-flag breaks en 2025.

Veinte años entre "posible" y "rutinario" — el gap se cerró cuando la capacidad se mudó a una herramienta que la gente ya tenía abierta.

¿Qué significa esto para tu startup?

Si tu producto toca video, ahora tienes un patrón nativo en el navegador para crear layouts reactivos sin procesados en post. Las tres palancas concretas:

Inventa un cue por cada momento comercial. No busques "shoppable video" como problema cerrado — un cue por variante de producto, con payload de layout por asset, te deja hacer A/B de qué panel convierte mejor sin tocar la app.
Apunta a interacciones que compensen pausar. El squeeze vale cuando el panel hace algo que el video solo no puede: mostrar precio, capturar email, abrir un intérprete de señas. No todo merece una celda.
Separa agendamiento de lógica. Toda la programación vive en un archivo de texto (.vtt) que CI puede regenerar. Tu rama de JavaScript solo lee data-layout. Es el mismo patrón que ya usan empresas como Mux (Mux Video) cuando separan encoding de delivery — declarativo por fuera, código por dentro.

Sobre Mux, en contexto

Mux es una plataforma de infraestructura de video fundada por Jon Dahl que ofrece Mux Video (API de subida y streaming con auto-optimización por dispositivo y red) y Mux Data (analítica de calidad de experiencia que rastrea rebuffering, startup time y errores). El equipo explica en el post de Google Cloud que la tesis es "una llamada a la API por cada problema difícil de video" — convertir el pipeline de encoding, CDN y análisis en un único punto de integración para desarrolladores (fuente: Google Cloud Blog).

El blog donde apareció el artículo es una de las publicaciones técnicas más leídas del sector video-infrastructure, y suelen empujar demos open source con Video.js, hls.js y Mux Player como bloques reutilizables.