Restore the old style of the YouTube player!
YT Player Classicifier by aubymori
Details
Authoraubymori
LicenseUnlicense
Categoryyoutube
Created
Updated
Size31 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Outline of what this style does (all disableable!):
- Player scale: (Note: You cannot use current player scale)
- 2020 scale (smaller than current)
- 2019 scale (smaller than 2020)
- Menus:
- 2015 (Smallest, bordered, differently styled)
- 2019 (Small, same style as current)
- Current (unchanged)
- Disable menu icons
- Disable "Most replayed" graph above progress bar
- Old embed header (no profile picture, smaller, etc.)
- Old storyboard (More compact, boxed rather than floating)
- Only show player UI when hovering
- Less intense gradient on top and bottom
- Hide "More videos" box that shows when pausing embedded videos
- Old player error style with TV static
- Hide autoplay toggle in bottom right
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YT Player Classicifier
@namespace https://github.com/YukisCoffee
@version 1.3.2
@description Return the old scales of the YouTube player.
@author Taniko Yamamoto <kirasicecreamm@gmail.com>
@author Aubrey Pankow <aubyomori@gmail.com>
@preprocessor less
@var checkbox smallerLike2019 "Use pre-2020 scaling (even smaller)" 0
@var select menuType "Menu type" ["2015", "2019", "Current*"]
@var checkbox noMenuIcons "Disable menu icons" 0
@var checkbox noHeatmap "Disable 'Most replayed' graph" 0
@var checkbox oldEmbedHead "Disable profile picture on embed" 0
@var checkbox oldStoryboard "Old storyboard when scrubbing through video" 0
@var checkbox chromeOnHover "Only show player UI on hover" 0
@var checkbox lighterGradient "Less intense gradient" 0
@var checkbox hideMoreVideos "Hide \"More videos\" on embed" 0
@var checkbox oldErrors "Old player errors (TV static)" 0
@var checkbox hideAutonav "Hide modern autoplay toggle" 0
==/UserStyle== */
@-moz-document domain("www.youtube.com"), domain("youtube-nocookie.com"), domain("youtube.googleapis.com") {
// Define common player scale definitions depending on user
// scale preference.
.player-scale() when (@smallerLike2019 = 0)
{
@chrome-bottom-scale: 40px;
@chrome-button-width: 40px;
@chrome-progress-bar-position: 39px;
@chrome-text-line-height: 39px;
}
.player-scale() when (@smallerLike2019 = 1)
{
@chrome-bottom-scale: 36px;
@chrome-button-width: 36px;
@chrome-progress-bar-position: 35px;
@chrome-text-line-height: 35px;
}
.ytp-menuitem-icon:empty {
display: none !important;
}
.ytp-videowall-still-round-medium .ytp-videowall-still-image {
border-radius: 0;
}
// Apply styles across the entire ytp namespace
// (Also apply over the ytp-embed class in order to
// not affect users using that)
// only change ytp-embed when it's not big mode as ytp-embed
// overrides the ytp-big-mode code included in www-player.css
.ytp-, .ytp-embed:not(.ytp-big-mode) .ytp-, .ytp-small-mode .ytp-
{
&popup
{
outline: 0 !important;
}
&chrome-bottom
{
.player-scale();
height: @chrome-bottom-scale;
}
&progress-bar-container
{
.player-scale();
bottom: @chrome-progress-bar-position;
}
&chrome-controls
{
.player-scale();
height: @chrome-bottom-scale;
line-height: @chrome-bottom-scale;
& .ytp-button, & .ytp-replay-button
{
width: @chrome-button-width;
padding: 0;
// Width override affects chapter menus, so
// undo these changes manually
&.ytp-chapter-title
{
width: 100%;
}
// Also apply these overrides to specially
// padded buttons
&.ytp-mute-button,
&.ytp-next-button,
&.ytp-miniplayer-button,
&.ytp-remote-button
{
padding: 0;
}
// Correct the pressed state after to not be
// positioned incorrectly
&[aria-pressed="true"]::after
{
// Larger player scale definitions:
&
{
height: 2px;
border-radius: 2px;
left: 10px;
width: 20px;
bottom: 8px;
}
// 2019 player scale definitions
& when (@smallerLike2019 = 1)
{
width: 18px;
left: 9px;
bottom: 6px;
height: 2px;
border-radius: 2px;
}
}
}
& .ytp-youtube-button
{
width: 67px;
}
// Play button should have its own overrides
// as it is slightly wider than the rest of the
// control buttons.
& .ytp-play-button
{
width: 46px;
}
}
// Rescale line heights of the player text displays
&time-display, &chapter-container
{
.player-scale();
line-height: @chrome-text-line-height;
}
&player-content
{
bottom: 53px;
&:not(.ytp-upnext):not(.html5-endscreen)
{
top: 60px;
}
}
// 2019 player scale had a smaller gradient as well.
// Therefore, shrink its size when using the setting.
&gradient-bottom when (@smallerLike2019 = 1)
{
height: 49px;
padding-top: 49px;
}
&settings-menu when (@smallerLike2019 = 0)
{
bottom: 53px;
}
// Settings menu should be positioned a little lower for the
// 2019 player scale.
&settings-menu when (@smallerLike2019 = 1)
{
bottom: 49px;
right: 12px;
}
// Tooltips
&tooltip.ytp-bottom:not(.ytp-tooltip-opaque),
&tooltip.ytp-preview.ytp-text-detail
{
top: unset !important;
bottom: 54px !important;
& when (@smallerLike2019 = 1) {
bottom: 50px !important;
}
.ytp-big-mode & {
bottom: 75px !important;
}
}
// Fix scaling with modern storyboard preview
&tooltip.ytp-preview:not(.ytp-text-detail) when (@oldStoryboard = 0) {
transform: translateY(-29px); // I fucking hate CSS
}
// Comfy feeling autoplay toggle in 2019 player scale
// An equally hacky mess but idc it works for now!
&autonav-toggle-button when (@smallerLike2019 = 1)
{
transform: scale(0.9251237);
top: 11px;
}
// Misc styles
&skip-intro-button
{
bottom: 50px;
height: 40px;
}
&webgl-spherical-control
{
top: 60px;
}
}
// Correct caption scalings
.html5-video-player:not(.ytp-autohide) .caption-window.ytp-caption-window-bottom
{
& when (@smallerLike2019 = 0)
{
margin-bottom: 53px;
}
& when (@smallerLike2019 = 1)
{
margin-bottom: 49px;
}
& svg, & .ytp-icon
{
width: 40px;
height: 40px;
}
}
.html5-video-player:not(:hover) .caption-window.ytp-caption-window-bottom when (@chromeOnHover = 1)
{
margin-bottom: 0;
}
// 2019 menu scale definitions
& when (@menuType = 2019)
{
.ytp-
{
&settings-menu
{
right: 12px;
bottom: 49px;
}
&popup
{
border-radius: 2px;
}
&panel
{
min-width: 0 !important;
&-menu
{
padding: 6px 0;
width: 100%;
}
&-header
{
padding: 6px 0;
height: 33px;
font-size: 109%;
}
}
&menuitem
{
height: 33px;
&-label
{
font-size: 118%;
font-weight: 500;
&, .ytp-menuitem-content
{
padding: 0 15px;
}
.ytp-menuitem-icon:not(:empty) + & when (@noMenuIcons = 0)
{
padding-left: 0;
}
}
&[role="menuitemradio"] .ytp-menuitem-label
{
text-align: right;
}
}
&panel-header
{
height: 33px;
}
&big-mode .ytp-
{
&menuitem
{
height: 49px;
&-label
{
padding: 0 22px;
}
}
&panel-
{
&header
{
height: 49px;
}
&title
...