2011 Youtube Player by xammand

Details

Authorxammand
LicenseNo License
CategoryYoutube
Created2 years, 2 months ago
Updated2 years, 2 months ago
Size18 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

This is my style of the 2011 Youtube player. This is the first version of it so of course it will have bugs.
Notes

This style requires Youtube Redux. Firefox: https://addons.mozilla.org/en-US/firefox/addon/youtube-redux/ Chrome: https://chrome.google.com/webstore/detail/youtube-redux/mdgdgieddpndgjlmeblhjgljejejkikf?hl=en.
Click on the Youtube Redux icon and check the small video player which is under Video Page. On the right which probabally says something like 853x480 click that and change it to 640x360. Also check use pillarboxing. And that's it.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         2011 Youtube Player
@version      20220918.17.46
@namespace    userstyles.world/user/xammand
@description  This is my style of the 2011 Youtube player. This is the first version of it so of course it will have bugs.
@author       xammand
@license      No License
==/UserStyle== */

@-moz-document domain("www.youtube.com") {
/* 2011 Youtube Player */

.ytp-gradient-bottom {
    display: none;
}

.ytp-chrome-bottom {
    min-height: 26px;
    height: unset;
    padding: 0;
    left: 0 !important;
    width: 100% !important;
}

/* Font */

.html5-video-player {
    font: 12px arial,sans-serif;
}

/* Bar */

.ytp-progress-bar-container:not([aria-disabled="true"]) {
    margin-top: 8px;
    background: rgba(0,0,0,0);
    bottom: 30px;
}

.ytp-progress-bar {
    position: unset;
}

.ytp-chapter-hover-container {
    float: none;
    width: 100% !important;
    position: unset;
}

.ytp-progress-list {
    transform: none;
    height: 8px;
    background: #1e1f1f;
    background-image: linear-gradient(to top,rgba(30,31,31,.75) 89%,#2f2f2f 90%);
}

.ytp-play-progress {
    background-image: linear-gradient(to bottom,#c00 0,#600 100%);
}

.ytp-load-progress, .ytp-hover-progress-light {
    background: none;
}

.ytp-scrubber-button.ytp-swatch-background-color {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-common-vflzogr__.png) -305px -41px;
    transform: none;
    transition: none;
}

.ytp-scrubber-button.ytp-swatch-background-color:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-common-vflzogr__.png) 0 0;
}

.ytp-scrubber-button {
    width: 13px;
    padding: 1.5px;
    margin: 0px 0px 0px 0;
    border-radius: 0;
}

/* Bar Tooltip */

.ytp-tooltip.ytp-bottom.ytp-preview {
    top: unset !important;
    bottom: 0;
    padding: 0;
    transition: none;
}

.ytp-tooltip.ytp-preview .ytp-tooltip-bg {
    display: none;
}

.ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-text-wrapper {
    bottom: 0 !important;
    float: left;
}

.ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-title {
    display: none;
}

.ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-text {
    width: 50px;
    height: 20px;
    background-color: rgba(22,22,22,0.8);
    border-radius: 4px;
    padding: 2px;
    display: inline-block;
    text-shadow: none;
    font-size: 11px;
    line-height: 20px;
    color: #e3e3e3;
    text-align: center;
    top: unset;
    bottom: 44px;
    left: -40px;
}

.ytp-tooltip.ytp-bottom.ytp-preview .ytp-tooltip-text:after {
    content: "";
    border-top: 5px solid rgba(22,22,22,0.8);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    bottom: -5px;
    left: 23px;
}

/* Player */

.ytp-exp-bottom-control-flexbox .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;
    padding-bottom: 1px;
}

/* Buttons */

.ytp-chrome-controls .ytp-button {
    border-right: 1px solid #222;
    padding-right: 1px;
}

.ytp-prev-button.ytp-button,.ytp-next-button.ytp-button {
    display: none;
}

.ytp-play-button.ytp-button[aria-label="Play (k)"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -32px -150px;
    height: 25px;
    width: 55px;
}

.ytp-play-button.ytp-button[aria-label="Play (k)"]:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -32px -123px;
}

.ytp-play-button.ytp-button[aria-label="Pause (k)"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -340px;
    height: 25px;
    width: 55px;
}

.ytp-play-button.ytp-button[aria-label="Pause (k)"]:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -70px;
}

.ytp-play-button.ytp-button svg {
    display: none;
}

.ytp-mute-button.ytp-button {
    height: 25px;
    width: 30px;
}

.ytp-mute-button.ytp-button svg {
    display: none;
}

.ytp-mute-button.ytp-button[aria-label="Unmute (m)"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -57px -69px;
}

.ytp-mute-button.ytp-button[aria-label="Unmute (m)"]:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -3px -258px;
}

.ytp-mute-button.ytp-button[aria-label="Mute (m)"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -231px;
}

.ytp-mute-button.ytp-button[aria-label="Mute (m)"]:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -177px;
}

.ytp-subtitles-button.ytp-button {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -150px;
    height: 25px;
    width: 30px;
    padding: 0 2px 0 0;
    position: relative;
    top: -14px;
}

.ytp-subtitles-button.ytp-button:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -57px -339px;
}

.ytp-subtitles-button.ytp-button[aria-pressed="true"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -128px -178px;
}

.ytp-subtitles-button.ytp-button svg, .ytp-subtitles-button.ytp-button[aria-pressed="true"]:after {
    display: none;
}

.ytp-settings-button.ytp-button {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -89.5px -70px;
    height: 25px;
    width: 30px;
    padding: 0 2px 0 0;
    position: relative;
    top: -14px;
}

.ytp-settings-button.ytp-button:hover,.ytp-settings-button.ytp-button:focus {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -35.5px -259px;
}

.ytp-settings-button.ytp-button[aria-expanded="true"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -89.5px -70px;
    background-color: #141414;
}

.ytp-settings-button.ytp-button svg {
    display: none;
}

.ytp-size-button.ytp-button {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -121px -340px;
    height: 25px;
    width: 30px;
    padding: 0 2px 0 0;
    position: relative;
    top: -14px;
}

.ytp-size-button.ytp-button:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -32px -43px;
}

.ytp-size-button.ytp-button svg {
    display: none;
}

ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy {
    background-color: #444;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#555),to(#333));
    height: 510px;
    max-height: none;
    min-height: auto;
    -webkit-transition: background-color 0.2s ease-in;
}

ytd-watch-flexy[theater] #player-container.ytd-watch-flexy {
    width: 854px;
    margin: 0 auto;
}

.ytp-fullscreen-button.ytp-button {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -128px -43px;
    height: 25px;
    width: 30px;
    padding: 0 2px 0 0;
    position: relative;
    top: -14px;
}

.ytp-fullscreen-button.ytp-button:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -89px -340px;
}

.ytp-fullscreen-button.ytp-button svg {
    display: none;
}

.ytp-fullscreen-button.ytp-button[aria-label="Exit full screen (f)"] {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) -32px -205px;
    height: 25px;
    width: 30px;
    padding: 0 2px 0 0;
    position: relative;
    top: -14px;
}

.ytp-fullscreen-button.ytp-button[aria-label="Exit full screen (f)"]:hover {
    background: no-repeat url(http://s.ytimg.com/yt/imgbin/player-dark-vflf2FniH.png) 0 -49px;
}

.ytp-fullscreen-button.ytp-button svg {
    display: none;
}

/* Volume Slider */

.ytp-volume-panel {
   margin-top: 4px;
    transition: width 0.5s ease-in 0.5s;
}

.ytp-volume-slider-handle:before
  {
    left: -64px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAOCAYAAADdeGlVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAABmAAAADgBV/HzAAAABW0lEQVRYw+2YsWqDQBjH/3dcBZekWCFk71KcsnQSksU36Bt06wP0ITqXkjfofqsZkrUUnNwKHbJYUKdSiUquQ1sxTYfESzkv+IOD78S7+//9+JRPIoSAbhBCqlgIMQZwB+ASwBOAW0LIQkdfGx5lDHiet/O9i/n8YKKLsqziLMsSwzCsn3me56lpmmcnjG2sGU8me53h+/7B9DaByW/RjMfhsPHaq+WyiimlVllLFKXUarJn2yAXpql1zT/H8da1035ftSxp2P1goFqDFPVqOSbYx3qtWoMURVGolvAvsPcuMa2EvXWJaSXsdbVSrUGKo01MOBqp1iDFXx//fXuWNqKswbzu9RqfO03TKg7DcMuA4zikazB35PeDeZHZbDarwiiKYNt2NY+/+xrtq0YIod2o47puwjkXQRAIzrlwXTfR1Vd9SL3KVFH/iQnAA/AA4BxfhXgDwNfRV51Pa+CPkys0tRoAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC);
    background-position: 16px !important;
    height: 120px;
  }

  .ytp-volume-slider-handle:after
  {
    left: 5px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAAAOCAYAAADdeGlVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAABmAAAADgBV/HzAAAABW0lEQVRYw+2YsWqDQBjH/3dcBZekWCFk71KcsnQSksU36Bt06wP0ITqXkjfofqsZkrUUnNwKHbJYUKdSiUquQ1sxTYfESzkv+IOD78S7+//9+JRPIoSAbhBCqlgIMQZwB+ASwBOAW0LIQkdfGx5lDHiet/O9i/n8YKKLsqziLMsSwzCsn3me56lpmmcnjG2sGU8me53h+/7B9DaByW/RjMfhsPHaq+WyiimlVllLFKXUarJn2yAXpql1zT/H8da1035ftSxp2P1goFqDFPVqOSbYx3qtWoMURVGolvAvsPcuMa2EvXWJaSXsdbVSrUGKo01MOBqp1iDFXx//fXuWNqKswbzu9RqfO03TKg7DcMuA4zikazB35PeDeZHZbDarwiiKYNt2NY+/+xrtq0YIod2o47puwjkXQRAIzrlwXTfR1Vd9SL3KVFH/iQnAA/AA4BxfhXgDwNfRV51Pa+CPkys0tRoAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAA...
Reviews

No reviews yet.