control-panel-for-youtube icon indicating copy to clipboard operation
control-panel-for-youtube copied to clipboard

Disable the top bar adhesion, for a more immersive and spacious browsing experience of video items.

Open zixude opened this issue 3 months ago • 1 comments

Scene: Usage rate isn't particularly high for the top bar,which usually focuses on the search box.However,the top bar permanently occupies the entire top area,causing wasted space.We need to disable sticky behavior for the top bar,so that users can get more space and a deeper immersive experience when scrolling down to browse video projects.

Note: Disabling sticky behavior for the top bar doesn`t mean the top bar's functions can't be used.When users scroll to the top of the page,they can still see the top bar.

Conclusion: In my opinion,this feature will make the control panel for YouTube stand out,because it makes the YouTube interface very clean and immersive.

Thank you.

zixude avatar Sep 04 '25 03:09 zixude

We already have this feature for full size theater mode, it slides down when you hover near the top of the screen or focus the search input by pressing /.

This an adjusted version which would apply to every video page regardless of the video mode:

/* Hide header */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container #masthead {
  transform: translateY(-100%);
  transition: transform .15s ease-in !important;
}
/* Slide out after a short delay on hover */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container:hover #masthead {
  transform: translateY(0);
  transition: transform .3s ease-out .35s !important;
}
/* Appear instantly when focused (e.g. press / to search) */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #masthead-container:focus-within #masthead {
  transform: translateY(0);
  transition: none !important;
}
/* Reclaim header space */
#content.ytd-app:has(> #page-manager > ytd-watch-flexy[role="main"]:not([fullscreen])) #page-manager {
  margin-top: 0 !important;
}

One issue when not in theater mode is the bar doesn't have a background when it slides down because it doesn't need one when it's fixed in place:

Image

insin avatar Oct 24 '25 13:10 insin