i'm trying to make a chrome extension that keeps the controls always visible on a youtube video within the native youtube page.

so far i have this js

$(document).ready(function() {  
 
   setInterval(function(){
       $('.ytp-autohide').removeClass('ytp-autohide');
       $('#player-container').mouseover();
   },100);
   
});

but removing the ytp-autohide class stops the timer/bar progress and i cant figure out how to instead activate the showcontrols function via js mouseover or somesuch.

can i keep the progress bar & time going somehow or alternately recreate the mouseover showcontrols function with js?

i'm trying to make a chrome extension that keeps the controls always visible on a youtube video within the native youtube page.

so far i have this js

$(document).ready(function() {  
 
   setInterval(function(){
       $('.ytp-autohide').removeClass('ytp-autohide');
       $('#player-container').mouseover();
   },100);
   
});

but removing the ytp-autohide class stops the timer/bar progress and i cant figure out how to instead activate the showcontrols function via js mouseover or somesuch.

can i keep the progress bar & time going somehow or alternately recreate the mouseover showcontrols function with js?

• javascript
• jquery
• google-chrome-extension
• youtube

2 Answers 2

August 2024

This actually works pretty fine in a userscript app (like TamperMonkey) or simply pasted as-is in the console.

setInterval(() => {
    // Keep controls visible
    const container = document.querySelector('#movie_player')
    container.classList.remove('ytp-autohide')

    // Getting played time
    const video = document.querySelector('.video-stream')
    const hours = Math.floor(video.currentTime / 3600)
    let minutes = Math.floor(video.currentTime / 60) - (hours * 3600)
    let seconds = Math.round(video.currentTime % 60)
    if(seconds < 10){ seconds = `0${seconds}` }
    if(hours > 0 && minutes < 10){ minutes = `0${minutes}` }

    // Displaying played time
    const timeDisplay = document.querySelector('.ytp-time-current')
    timeDisplay.innerText = `${(hours > 0 ? `${hours}:` : '')}${minutes}:${seconds}`

    // Progress bar
    const percentagePlayed = video.currentTime / video.duration
    const progressBar = document.querySelector('.ytp-play-progress')
    progressBar.style = `left: 0px; transform: scaleX(${percentagePlayed})`

    // Buffered bar
    const percentageBuffered = video.buffered.end(0) / video.duration
    const bufferedBar = document.querySelector('.ytp-load-progress')
    bufferedBar.style = `left: 0px; transform: scaleX(${percentageBuffered})`
}, 10)

It also works fullscreen ;)

January 2021's answer (Not working anymore)

That would be:

setTimeout(function(){

    let video = document.querySelector("#movie_player")

    setInterval(function(){
      video.dispatchEvent(new Event('mousemove'));
    },100);
},1500)

So you where not targeting the right element and you where not triggering the event correctly.

Adding to Louys answer, the line with minutes should be for today (2025-03-20):

let minutes = Math.floor(video.currentTime / 60) - (hours * 60)