A Pre2015 YouTube Html5 Player aimed to be more accurate.
2012 HTML5 Player by tersiswilvin
Mirrored from https://github.com/tersiswilvin/Legacy-YouTube-Player/raw/Release/Dev/Master/src/LegacyPre2015PlayerMaster.user.css
Details
Authortersiswilvin
LicenseCC-BY-SA-4.0
CategoryYouTube
Created
Updated
Size375 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Version 1.22.30 (12/15/2023)
Disclaimer :
If you use FireFox, before installing go to "about:config", click accept, then search for "layout.css.has-selector.enabled" and enable it if it's disabled then reload any youtube tabs you had opened at the time, else some parts of the theme may break or won't be functional.
Features
-
Highly Customizable :
- Apply 7ktube Fix
-
AutoHide Mode
- Hide
- Show
-
AutoHide Animation
- Pulsate
- Fade
- AutoHide Cursor
-
Bezel Style
- 2012M
- 2014
- Display Quality Badges
- Legacy Error Background
- No Full Width Player
-
Play button Style
- 2010M
- 2011M
- 2012E
- 2013E
- 2014M
- 2016M
-
Player Style
- 2012E
- 2012M
- 2012L
-
Player Theme
- Light
- Dark
-
Preview Style
- 2012M
- 2014
-
Progress Color
- Red
- White
- Remove Chapter Spacing
- Remove Extras
- Remove Preview Caret
- Tooltip 2012L Caret Fix
- Tooltip Legacy Labels
- Tooltip Original Height
-
Topbar Style
- 2012E
- 2012M
- 2012L
- Use Legacy Captions
- Use Legacy Theme Ad Colors
- Use Legacy Tooltips
- Use Square Scrubber
- Use Watermark instead
-
Support for :
- 7KTube
- Rehike
- SponsorBlock
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 2012 HTML5 Player
@version 20240215.1.22.33
@namespace userstyles.world/user/tersiswilvin
@description A Pre2015 YouTube Html5 Player aimed to be more accurate.
@author TersisWilvin
@license CC-BY-SA-4.0
@preprocessor less
@var checkbox 7ktubeFix "Apply 7ktube Fix" 0
@var select AutoHideStyle "AutoHide Mode" ["Hide", "Show*"]
@var select AutoHideAnimation "AutoHide Animation" ["Pulsate*","Fade"]
@var checkbox AutoHideCursor "AutoHide Cursor" 0
@var select BezelStyle "Bezel Style" ["2012M*","2014"]
@var checkbox QualityBadges "Display Quality Badges" 0
@var checkbox TVStaticErrors "Legacy Error Background" 1
@var checkbox NoFullWidthPlayer "No Full Width Player" 0
@var select PlayButtonType "Play button Style" ["2010M", "2011M", "2012E*", "2013E", "2014M", "2016M"]
@var select Html5PlayerStyle "Player Style" ["2012E","2012M*","2012L"]
@var select ThemeStyle "Player Theme" ["Light", "Dark*"]
@var select ThumbnailType "Preview Style" ["2012M*","2014"]
@var select ProgressColor "Progress Color" ["Red*", "White"]
@var checkbox RemoveChapterSpace "Remove Chapter Spacing" 0
@var checkbox RemoveExtras "Remove Extras" 1
@var checkbox ThumbnailCaret "Remove Preview Caret" 1
@var checkbox TooltipCaret "Remove Tooltip Caret" 0
@var checkbox TooltipCrtFix "Tooltip 2012L Caret Fix" 0
@var checkbox TooltipLgyLbl "Tooltip Legacy Labels" 1
@var checkbox TooltipOGHgt "Tooltip Original Height" 0
@var select TopbarType "Topbar Style" ["2012E","2012M*","2014"]
@var checkbox LegacyCaptionsEnabled "Use Legacy Captions" 1
@var checkbox UseLegacyAdColors "Use Legacy Theme Ad Colors" 0
@var checkbox LegacyTooltipsEnabled "Use Legacy Tooltips" 1
@var checkbox SquareScrubber "Use Square Scrubber" 0
@var checkbox UseWatermark "Use Watermark instead" 0
==/UserStyle== */
@-moz-document url-prefix("https://"), url-prefix("http://") {
@-webkit-keyframes ytp-bezel-fadeout {
0% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
}
}
@keyframes ytp-bezel-fadeout {
0% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
to {
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
}
}
.ytp-suggested-action, .html5-video-player .ytp-chrome-controls .ytp-button svg, .ytp-miniplayer-button-container svg, .ytp-spinner-left, .ytp-spinner-right, button.ytp-subtitles-button.ytp-button[aria-pressed]:after, .iv-branding, .ytp-heat-map.ytp-progress-bar-hover:not(.ad-showing) .ytp-heat-map-container, .ytp-heat-map.ytp-fine-scrubbing-enable:not(.ad-showing) .ytp-heat-map-container, .ytp-pip-button.ytp-button, .ytp-title-enable-channel-logo .ytp-title-channel, .ytp-chrome-top .ytp-overflow-button, .ytp-share-icon svg, .ytp-watch-later-icon svg, .ytp-show-watch-later-title .ytp-watch-later-title, .ytp-show-share-title .ytp-share-title, .html5-video-player:not(.ytp-big-mode) .ytp-chrome-top .ytp-cards-button, .ytp-big-mode .ytp-chrome-top .ytp-cards-button, .ytp-chrome-top .ytp-cards-button, .ytp-large-play-button svg, .ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"], .ytp-chrome-top .ytp-playlist-menu-button, .ytp-fine-scrubbing-exp .ytp-preview:not(.ytp-text-detail) .ytp-tooltip-edu, .ytp-tooltip.ytp-has-duration:has(.ytp-tooltip-bg), .ytp-title-subtext, .ytp-doubletap-ui-legacy, .ytp-copylink-button, .ytp-paid-content-overlay {
display: none !important;
}
& when (@RemoveExtras = 1) {
#startSegmentButton, #cancelSegmentButton, #deleteButton, #submitButton, #infoButton, #sponsorBlockDurationAfterSkips, .skipButtonControlBarContainer, .ytp-chapter-container {
display: none !important;
}
}
.html5-video-player {
font-family: Arial,Helvetica,sans-serif;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
background-color: #000;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: pointer;
overflow: hidden;
}
& when (@AutoHideCursor = 1) {
.html5-video-player.ytp-autohide, .ytp-autohide {
cursor: none;
}
}
.ytp-chrome-bottom, html[disable-flexy-player="true"]:not([static]):not([pseudo-static]) body ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom, .ytp-small-mode .ytp-chrome-bottom, .ytp-embed .ytp-chrome-bottom {
& when (@NoFullWidthPlayer = 0) {
left: 0 !important;
width: 100% !important;
}
height: auto !important;
padding-top: 0;
cursor: auto;
z-index: 930;
.ytp-big-mode & {
/*bottom: 40px*/
}
& when (@AutoHideAnimation = Pulsate) {
-moz-transition: bottom 0.05s ease-in;
-ms-transition: bottom 0.05s ease-in;
-o-transition: bottom 0.05s ease-in;
-webkit-transition: bottom 0.05s ease-in;
transition: bottom 0.05s ease-in;
}
& when (@AutoHideAnimation = Fade) {
-moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
}
html[pseudo-static] body #movie_player[aria-label="YouTube Video Player"] .ytp-chrome-bottom {
width: 100% !important;
}
.ytp-chrome-top, .ytp-chrome-bottom {
text-shadow: 0 0 0px rgba(0, 0, 0, .5) !important;
}
.ytp-chrome-controls, .ytp-embed .ytp-chrome-controls {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAYAAABrAQZpAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAABAAAAHQAh4gKwAAAAMUlEQVQI12OQlJD4x2Sgr8/I9OTZs5dM//79Y2T6//8/IyqLAcLClEBjYahDKCHSKADN5VNQpdTxzgAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
height: 26px !important;
padding-bottom: 1px;
line-height: 20px;
}
.ytp-exp-bottom-control-flexbox .ytp-left-controls .ytp-button {
float: right;
}
.ytp-exp-bottom-control-flexbox .ytp-right-controls .ytp-button {
float: left;
}
.ytp-time-display, .ytp-small-mode .ytp-time-display, .ytp-embed .ytp-time-display {
color: #999;
font-size: 11px;
font-family: Roboto, Helvicta, Arial, sans-serif;
padding: 0;
margin-left: 6px;
line-height: 28px !important;
}
.ytp-chapter-container, .ytp-chapter-title, .ytp-time-separator, .ytp-time-duration {
color: #999;
font-size: 11px;
font-family: Roboto, Helvicta, Arial, sans-serif;
padding: 0;
line-height: 28px;
}
.skipButtonControlBarContainer {
line-height: 28px !important;
}
.ytp-time-current {
color: #fff;
}
.ytp-big-mode.ytp-autohide .ytp-chrome-bottom {
& when (@AutoHideAnimation = Pulsate) {
bottom: -35px;
-moz-transition: bottom 0.5s ease-in;
-ms-transition: bottom 0.5s ease-in;
-o-transition: bottom 0.5s ease-in;
-webkit-transition: bottom 0.5s ease-in;
transition: bottom 0.5s ease-in;
}
& when (@AutoHideAnimation = Fade) {
-moz-transition: opacity .25s cubic-bezier(0.4,0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.4,0,0.2,1);
transition: opacity .25s cubic-bezier(0.4,0,0.2,1);
opacity: 0;
}
}
.ytp-chrome-controls .ytp-button, .ytp-replay-button {
padding: 0;
box-sizing: unset;
}
.ytp-gradient-bottom, .ytp-autohide:not(.ytp-autohide-active) .ytp-gradient-bottom, .ytp-gradient-top, .ytp-autohide:not(.ytp-autohide-active) .ytp-gradient-top {
display: none;
}
& when (@AutoHideStyle = Show) {
.html5-video-player .ytp-cued-thumbnail-overlay-image {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: center;
z-index: 800;
}
.ytp-storyboard-framepreview-img {
height: 100% !important;
margin: 0 !important;
}
.ytp-cued-thumbnail-overlay {
height: unset;
background-size: unset;
-moz-background-size: unset;
-webkit-background-size: unset;
}
.html5-video-player:not(.ytp-big-mode):not(.ytp-player-minimized) .html5-video-container, .html5-video-player .__cxt-ar-annotations-container__, .html5-video-player:not(.ytp-big-mode):not(.ytp-player-minimized) .ytp-cued-thumbnail-overlay, .ytp-storyboard-framepreview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30px;
}
.html5-video-player:not(.ytp-big-mode):not(.ytp-player-minimized).ytp-hide-controls .html5-video-container, .html5-video-pla...