CSS Grid и WebVTT: как превратить видео в интерактивный телеэкран

The broadcast squeezeback, rebuilt with CSS Grid and WebVTT

Автор, вдохновившись футбольными трансляциями, воссоздал эффект «squeezeback» на чистом CSS и WebVTT. Вместо пост-продакшена, он использует CSS Grid для анимации макета, а WebVTT-файл задаёт тайминг появления панелей. Это позволяет добавлять интерактивные элементы, такие как формы или кнопки покупки, прямо в видео. Также рассматриваются приёмы: подсветка фона цветами видео через canvas, обработка фокуса для удержания формы и подводные камни CSS-анимаций.