YouTube: Make the Video Timer Always Visible

#webdev #javascript #tutorial #productivity

When listening to lectures on YouTube, I often type notes in a separate notebook. I usually want to reference the current timestamp alongside each note.

The problem is that YouTube only shows the current time when you hover over the video or toggle play/pause - then it quickly disappears. Switching windows, tapping play/pause, glancing at the time, and switching back gets old fast.

The timer lives in this element:

<span class="ytp-time-current">37:58</span>

When the controls are hidden, the timer stops ticking. You can also grab the time in seconds from the video element directly:

document.querySelector('video').currentTime

The Fix: Disable the Auto-Hide

YouTube's player controls are hidden by a function that publishes an autohideupdate event. Commenting out that call keeps the controls - and the timer - permanently visible.

Steps

Open DevTools and find the Search panel in the bottom drawer (or press Ctrl+Shift+F).
Search for autohideupdate. You'll get four hits, all in a file called base.js. At the time of writing, the URL looks like this:
```
www.youtube.com/s/player/89e685a2/player_ias.vflset/en_GB/base.js
```
The hash (89e685a2) will change with each player release.
Select the result containing ...H!==U&&Q.publish("autohideupdate",U). This takes you to the relevant line in base.js.
Click the Pretty Print button ({ }) to make the minified code readable.
Right-click in the source pane, select Override Content, and choose a local folder for overrides.

Comment out the auto-hide publish call:

Dd = function(Q, U, q) {
    Q.GC();
    var H = J2(Q);
    q ? (Q.C |= U,
    U & 1 && Q.u2.start(),
    U & 2 && Q.ZE.start(),
    U & 2048 && Q.AG.start()) : (Q.C &= ~U,
    U & 1 && Q.u2.stop(),
    U & 2 && Q.ZE.stop(),
    U & 2048 && Q.AG.stop(),
    U & 512 && Q.hG.stop());
    Q.C & 512 && !(Q.C & 128) && g.Z6(Q.hG, Q.XZ);
    U = J2(Q);
    // H !== U && Q.publish("autohideupdate", U)
    // disabled: keeps controls always visible
}