Skip to content

2012 HTML5 Player by tersiswilvin

Mirrored from https://github.com/tersiswilvin/Legacy-YouTube-Player/raw/Release/Dev/Master/src/LegacyPre2015PlayerMaster.user.css

Screenshot of 2012 HTML5 Player

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

A Pre2015 YouTube Html5 Player aimed to be more accurate.

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

  1. 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
  2. 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...

Reviews

No reviews yet.