CSS Gridで実現する放送の「スクイーズバック」：WebVTTでタイムラインを制御

The broadcast squeezeback, rebuilt with CSS Grid and WebVTT

Muxのブログで、テレビ放送で見られる「スクイーズバック」効果（映像が隅に縮み、周囲に別の情報が表示される）を、CSS GridとWebVTTで再現する方法を紹介。3x3のグリッドのトラックサイズをアニメーションさせて映像を縮め、空いたスペースにパネルを表示。タイムラインはWebVTTのキューの識別子とテキストで管理し、cuechangeイベントでレイアウトを切り替える。さらに、canvasで映像の色を抽出して周囲にアンビエントライトを再現するテクニックや、フォーム入力中のレイアウト変更を防ぐフォーカス制御も解説。CSS Gridのfr値の補間や@propertyの落とし穴など、実装上の注意点も具体的に示す。