Der Broadcast-Squeezeback, neu aufgebaut mit CSS Grid und WebVTT

The broadcast squeezeback, rebuilt with CSS Grid and WebVTT

Ein Entwickler von Mux zeigt, wie sich der bekannte TV-Effekt des Squeezebacks – das Verkleinern des Videobilds zugunsten von Zusatzinhalten – mit modernen Webtechnologien nachbauen lässt. Statt das Video vorab zu rendern, nutzt er ein CSS Grid, dessen Spalten und Zeilen animiert werden, um Platz für echte HTML-Elemente wie Buttons oder Formulare zu schaffen. Die zeitliche Steuerung übernimmt WebVTT, ein Textdatei-Format, das als Timeline dient. Ergänzt wird das Ganze um einen Ambient-Glow, der die Farben des Videos auf einen Canvas überträgt, sowie um Tipps zu CSS-Animationen und zur Integration mit Video.js.