NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript== // @name Youtube Old Player 2015 // @namespace YoutubeOldPlayer // @description Fixes the new UI to one that resembles old one // @author Senka & Roy Scheerens // @include https://www.youtube.com/* // @version 1.4 // @grant none // ==/UserScript== (function() { var addWatchLater = true; var watchLaterAdded = false; //mouse over the controls to update them (this seems to also work with 2000ms instead of 1000ms) var evObj = document.createEvent('Events'); evObj.initEvent("mousemove", true, false); var moviePlayer = document.querySelector(".html5-video-player"); setInterval(function() { if (!moviePlayer) { moviePlayer = document.querySelector(".html5-video-player"); } else if (!moviePlayer.classList.contains("seeking-mode")) { moviePlayer.dispatchEvent(evObj); } if (addWatchLater && !watchLaterAdded && moviePlayer) { var watchLater = document.querySelector(".ytp-watch-later-button"); if (watchLater) { var qaulitybutton = document.querySelector(".ytp-subtitles-button") || document.querySelector(".ytp-settings-button"); if (qaulitybutton) { qaulitybutton.parentNode.insertBefore(watchLater, qaulitybutton.nextSibling); watchLaterAdded = true; } } } }, 1000); //the css: var css = document.createElement('style'); css.type = "text/css"; css.textContent = [ // PLAYER EMBED ------------------------------------------------------------------------------------------------ " .html5-video-player .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:0px!important; height:25px!important;padding:0px!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)))!important;background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;}", " .html5-video-player .ytp-chrome-controls { height:25px!important;opacity:0.7!important;width:calc(100% + 24px)!important;left:0px!important;position:absolute!important;margin-left:-12px!important;background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #303030 10%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#303030), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#303030 10%,#000000 100%); /* W3C */}", " .html5-video-player .ytp-chrome-controls:hover { opacity:1!important;}", " .html5-video-player .ytp-time-display { display:block!important;line-height:25px!important;}", " .html5-video-player .ytp-progress-bar-container {bottom:24px!important;width:calc(100% + 24px)!important;margin-left:-12px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " .html5-video-player:hover .ytp-progress-bar-container {width:100%!important;margin-left:0px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " .html5-video-player .ytp-title { font-size:99%!important;text-shadow: 0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 1),0px 0px 5px rgba(0, 0, 0, 1);}", " .html5-video-player .ytp-chrome-top { opacity:0!important;}", " .html5-video-player .ytp-chrome-top:hover { opacity:1!important;}", // PLAYER FULLSCREEN ------------------------------------------------------------------------------------------- " #movie_player.ytp-fullscreen .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:4px!important; height:38px!important;padding:0px!important;background:none;}", " #movie_player.ytp-fullscreen .ytp-chrome-controls { height:30px!important;opacity:0.3!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */;}", " #movie_player.ytp-fullscreen .ytp-chrome-controls:hover { opacity:1!important;}", " #movie_player.ytp-fullscreen .ytp-time-display { display:block!important;line-height:30px!important;}", " #movie_player.ytp-fullscreen .ytp-button { height:30px!important;line-height:25px!important;}", " #movie_player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container { position:absolute!important;bottom:0px!important;width:calc(100% + 48px)!important;margin-left:-24px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " #movie_player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container:hover { position:absolute!important;bottom:0px!important;width:100%!important;margin-left:0!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " #movie_player.ytp-fullscreen .ytp-progress-bar { height:4px!important;}", " #movie_player.ytp-fullscreen .ytp-progress-list { background:none!important;height:2px!important;}", // fullscreen by embed " .html5-video-player.ytp-fullscreen .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:4px!important; height:38px!important;padding:0px!important;background:none;}", " .html5-video-player.ytp-fullscreen .ytp-chrome-controls { height:30px!important;opacity:0.3!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */;}", " .html5-video-player.ytp-fullscreen .ytp-chrome-controls:hover { opacity:1!important;}", " .html5-video-player.ytp-fullscreen .ytp-time-display { display:block!important;line-height:30px!important;}", " .html5-video-player.ytp-fullscreen .ytp-button { height:30px!important;line-height:25px!important;}", " .html5-video-player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container { position:absolute!important;bottom:0px!important;width:calc(100% + 48px)!important;margin-left:-24px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " .html5-video-player.ytp-fullscreen .ytp-chrome-bottom .ytp-progress-bar-container:hover { position:absolute!important;bottom:0px!important;width:100%!important;margin-left:0!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " .html5-video-player.ytp-fullscreen .ytp-progress-bar { height:4px!important;}", " .html5-video-player.ytp-fullscreen .ytp-progress-list { background:none!important;height:2px!important;}", // PLAYER YOUTUBE --------------------------------------------------------------------------------------------- " #movie_player .ytp-chrome-bottom { opacity:1!important;position:absolute!important;bottom:0px!important;height:30px!important;padding:0px!important;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)!important;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)))!important;background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)!important; }", " #movie_player .ytp-chrome-controls { height:30px!important;opacity:0.7!important;width:calc(100% + 24px)!important;left:0px!important;position:absolute!important;margin-left:-12px!important;background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #303030 10%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#303030), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 0%,#303030 10%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #000000 0%,#303030 10%,#000000 100%); /* W3C */}", " #movie_player .ytp-chrome-controls:hover { opacity:1!important;}", " #movie_player .ytp-time-display { display:block!important;line-height:30px!important;}", " #movie_player .ytp-progress-bar-container {bottom:29px!important;width:calc(100% + 24px)!important;margin-left:-12px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;}", " #movie_player:hover .ytp-progress-bar-container {width:100%!important;margin-left:0px!important;transition: all .25s cubic-bezier(0.0,0.0,0.2,1) !important;) !important;}", " #movie_player .ytp-progress-list { background:none!important;}", // Décalage pour la barre de controle sur youtube " #player #movie_player { height:calc(100% + 33px);}", // Video full size " #player .ytp-fullscreen {height:100%!important;}", " .html5-video-container {height:100%!important;}", // Positionnement du bouton "regarder plus tard" à droite " .ytp-watch-later-button { float:right!important;}", // Design du bouton de la progressbar " .ytp-scrubber-button {background:#f00000!important;border-radius: 9px;border:2px solid #dddddd;width:9px!important;height:9px!important;top:-4px!important;margin-left:-5px!important; -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1); -moz-transform: translateY(0px) scale(1,1)!important;-ms-transform: translateY(0px) scale(1,1)!important;-webkit-transform: translateY(0px) scale(1,1)!important;transform: translateY(0px) scale(1,1)!important; -moz-transition: -moz-transform .1s ease-out!important;-webkit-transition: -webkit-transform .1s ease-out!important;-ms-transition: -ms-transform .1s ease-out!important;transition: transform .1s ease-out!important;}", " #movie_player.ytp-fullscreen .ytp-scrubber-button, #movie_player .ytp-scrubber-button {background:#f00000!important;border-radius: 9px;border:2px solid #dddddd;width:10px!important;height:10px!important;top:-5px!important;margin-left:-4px!important; -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 1);}", // Placement de la video en hauteur + réduction de la taille pour le player embed " #player .html5-video-player .html5-video-container .html5-main-video {important;position:absolute!important;top:0%!important;transform:none!important;max-height: calc(100% - 25px)!important;}", // Recentrage vertical de la video pour la lecture en plein écran. " #player .ytp-fullscreen .html5-video-container .html5-main-video {position:absolute!important;top:50%!important;transform:translateY(-50%)!important;}", // Supression des dégradés noir du nouveau lecteur " .ytp-gradient-top, .ytp-gradient-bottom {display:none;} ", // Ajustement du bloc Description de la video sur youtube " #watch-header { margin-top:30px!important; }", ].join("\n"); document.head.appendChild(css); })();