ui experiments for userstyles.world
player for youtube 2016 2018 by rafailtheodoridis2008311850
Details
Authorrafailtheodoridis2008311850
LicenseCC Zero
Categoryyoutube.com
Created
Updated
Size380 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
please raise issuen the github reposytory
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-storyboar...