Syncing a YouTube Caption Bar with Video Time and Binary Search
Making captions larger sounds like a CSS task. The difficult part begins after the bar exists: it must follow playback, react immediately after a seek, survive YouTube's single-page navigation, and avoid rewriting the DOM hundreds of times for the same sentence. This article describes the synchronization core of YouTube Big Caption Bar, a Manifest V3 Chrome extension that places a large reading bar above a YouTube video. The design uses the media element as its clock, a sorted transcript as its timeline, binary search as its matcher, and a small amount of state to prevent unnecessary rendering. The short version Read time from the video, normalize cues into one sorted array, locate the active cue with binary search, and touch the DOM only when that cue changes. Reset the whole loop when YouTube navigates to another video. Treat the video element as the source of truth Do not build a separate stopwatch. Playback can pause, buffer, change speed, or jump after the user seeks...