DEV Community

Cover image for YouTube: Make the Video Timer Always Visible
Andrew Elans
Andrew Elans

Posted on • Edited on

YouTube: Make the Video Timer Always Visible

#webdev #javascript #productivity #tutorial

Update 2026-04-22

Still works, but noticed when browser tab is changed, the timer stops. But Not when you switch between browser and another app. This behaviour is ok for taken notes, but need to find the code responsible for visibilitychange

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

  1. Open DevTools and find the Search panel in the bottom drawer (or press Ctrl+Shift+F).

  2. 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.

  3. Select the result containing ...H!==U&&Q.publish("autohideupdate",U). This takes you to the relevant line in base.js.

  4. Click the Pretty Print button ({ }) to make the minified code readable.

  5. Right-click in the source pane, select Override Content, and choose a local folder for overrides.

  6. 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
}

  7. IMPORTANT Save the file, then right-click the page and choose Empty Cache and Hard Reload (DevTools must be open).

The timer is now permanently visible.

Note: DevTools must remain open for local overrides to take effect.

Top comments (1)

Collapse
 
itsugo profile image
Aryan Choudhary •

I love that you figured out how to keep the timer visible! I've been trying to do that for ages, and I never would have thought of digging into the base.js file. It's crazy how much we can customize YouTube with a little DevTools magic.