Youtube UI Fix

Moves the controls under the video and makes the UI look like it was before august 2015

Author
Roy192
Daily installs
4
Total installs
5,304
Ratings
53 5 0
Version
2.4.16
Created
2015-08-05
Updated
2023-09-26
License
MIT
Applies to

This user-script is based on my user-style on userstyles.org (Youtube Controls Under Player). Sadly enough a user-style is not going to cut it to cleanup the garbage Youtube has made (again). The main problem was that the time did not update when not hovering over the controls. This script solves that by adding an interval that calls the onmousemove event of the controls.

To customize the script a little, I've added a few checkboxes to the playback settings page on YouTube, and to url's with the word "ui_fix_options" in them.

https://www.youtube.com/account_playback

https://www.youtube.com/ui_fix_options

https://www.youtube.com/embed/ui_fix_options

https://www.youtube-nocookie.com/embed/ui_fix_options

https://youtube.googleapis.com/embed/ui_fix_options

Note that the settings are separate for the three different domains (www.youtube.com, www.youtube-nocookie.com, and youtube.googleapis.com). The settings may also be cleared by the browser, and will not carry over to private/incognito mode.

If you do want the settings to carry over, use the "Export Settings" button in the settings page. A userscript will be generated based on the current settings, install this, and the settings will always be set.

If for some reason you need to check if this script is active (for compatibility with another script for example), you can check for the "yt-ui-fix" class on the body element, or look for a script tag with YoutubeNewUIFix-Style as the id. 

if (document.body.classList.contains("yt-ui-fix"))
{
    alert("YouTube UI Fix is present 1");
}
// or using the style element
if (document.getElementById("YoutubeNewUIFix-Style") !== null)
{
    alert("YouTube UI Fix is present 2");
}


/* in CSS */
.yt-ui-fix
{
    /* background is red if YouTube UI Fix is present */
    background-color: red;
}

Features:

  • Non-transparent controls
  • Controls are not over the video
  • Controls don't hide at all
  • Controls have the old colors back
  • Controls are smaller (35px vs 40px)
  • Controls will update without having to move over them (which wasn't possible with only a style)
  • Option: disable animations (the expanding of the context menu when changing the quality)
  • In full-screen mode, the controls are also always visible, original colors, and they are smaller (35px again)
  • Option: revert the colors to their original light-gray on dark-gray (instead of the white on black/transparent). Can be enabled for fullscreen, non-fullscreen, both, or none
  • Option: re-enable auto-hide in full-screen, non-fullscreen, both, or none
  • Option: move the watch later button to the controls (next to the subtitles button at the bottom)
  • Works for embedded videos, but the height is not adjusted and will make the videos slightly smaller than intended.
  • Option: move the 'go back' button on the settings menus to the bottom (default off).
  • Option: makes the progressbar take up all the width (but only when not hovering over it). Thanks to Takato for this.
  • Option: makes the title appear when hovering over the video. Thanks to q1k for this.
  • Option: make the volume slider always visible.
  • Options change automatically in all tabs if changed.
  • Compatible with Resize Youtube Player To Window Size, Youtube+ and the new material layout.

Things still to do:

  • Fix the settings on the new layout.

Things I can't do (if you know how to do any of these things, let me know):

  • Change the width of the progress bar without bugging it out (works now when not hovering over)
  • Increase the height on embedded videos

Incompatibilities

  • It has been reported that there is a problem when using this in combination with RemoveAds, that the sub-menu with the three dots doesn't appear.