How to hide the progress bar during pause unless the mouse moves? (Subtitle visibilit

[Jacky Teerapat]

Hi everyone,
I’m facing an issue with the progress bar when watching videos on Jellyfin. When I pause a video, the progress bar and controls remain visible, and this is causing a problem because it overlaps with the subtitles, making them difficult to read.
I’d like to customize the behavior so that:

1. The progress bar and controls are hidden by default when the video is paused.
   
2. They appear only when I move the mouse over the video area.
   

Here’s what I’ve tried so far:

• I’ve looked into the Custom CSS option in the Admin Dashboard but couldn’t identify the correct class or ID to target this behavior.
  
• I searched online but couldn’t find a solution specific to hiding the progress bar during pause mode.
  

This issue is particularly annoying because the progress bar blocks the subtitles, disrupting the viewing experience.
If anyone knows how to fix this or has a suggestion for Custom CSS that can solve the problem, I’d greatly appreciate your help!
Thanks in advance!

[TheDreadPirate]

@Ted Hinklater - Are you aware of a way to do this?

[Jacky Teerapat]

What do you mean? Sorry I don't understand

[TheDreadPirate]

I tagged another user who knows CSS. That wasn't directed at you.

[Jacky Teerapat]

Do you have any updates on this?

[Jacky0]

was there any follow up on this?
I really need this as well for nvidia shield app.
the progress bar & buttons during pause make it so annoying to watch subtitled content.
I'll write the code myself if I have to. I just need to know what lines control the pause overlay.

[theguymadmax]

was there any follow up on this?
I really need this as well for nvidia shield app.
the progress bar & buttons during pause make it so annoying to watch subtitled content.
I'll write the code myself if I have to. I just need to know what lines control the pause overlay.

This thread is talking about the webUI. The Jellyfin for Android TV is not a wrapper for the webUI and uses a custom interface, that does not have have CSS styling capabilities. It's already a requested feature: https://github.com/jellyfin/jellyfin-and...ssues/3924

[Jacky0]

was there any follow up on this?
I really need this as well for nvidia shield app.
the progress bar & buttons during pause make it so annoying to watch subtitled content.
I'll write the code myself if I have to. I just need to know what lines control the pause overlay.

This thread is talking about the webUI. The Jellyfin for Android TV is not a wrapper for the webUI and uses a custom interface, that does not have have CSS styling capabilities. It's already a requested feature: https://github.com/jellyfin/jellyfin-and...ssues/3924

okay, so the nvidia shield app can't be customized CSS styling at all?
if so fine I'll run a small computer with ubuntu or something that can run the webUI.
can I customize pause overlay in the webUI using CSS styling capabilities?
Is there a thread on here that would have the relevant info so I could code it myself?

I apologize if I sound pushy but this pause overlay issue is not something that I can wait a few months or a year & hope it gets fix.
I have deaf family member that functionally can't watch tv with us until i fix this. pls any anyone help.

[Efficient_Good_5784]

okay, so the nvidia shield app can't be customized CSS styling at all?
if so fine I'll run a small computer with ubuntu or something that can run the webUI.
can I customize pause overlay in the webUI using CSS styling capabilities?
Is there a thread on here that would have the relevant info so I could code it myself?

I apologize if I sound pushy but this pause overlay issue is not something that I can wait a few months or a year & hope it gets fix.
I have deaf family member that functionally can't watch tv with us until i fix this. pls any anyone help.

You can only customize the webUI with CSS.
You'll know if the client you're using is the webUI if it looks the same as it does on a browser.

The Nvidia Shield app is the Android TV app which uses its own GUI and not the webUI.

When customizing the CSS for yourself on a web browser such as Chrome or Firefox, you can play around with F12 and "ctrl + shift + c" to open the auto-selector. The auto-selector will auto select whatever you click on the screen and open the relevant CSS code for it which you can copy and modify. You'll just be copying that and pasting your modified CSS to the dashboard of your server.

Note that the webUI lets you add custom CSS to the client settings. That only applies to that single client and not to everyone else.