diff --git a/assets/css/player.css b/assets/css/player.css index 0583e327..656fb48c 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -1,3 +1,75 @@ +/* Youtube player style */ +.video-js.player-style-youtube .vjs-progress-control { + height: 0; +} + +.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control { + position: absolute; + right: 0; + left: 0; + width: 100%; + margin: 0; +} + +.video-js.player-style-youtube .vjs-control-bar { + background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0,0.5)); +} + +.video-js.player-style-youtube .vjs-slider { + background-color: rgba(255,255,255,0.2); +} + +.video-js.player-style-youtube .vjs-load-progress > div { + background-color: rgba(255,255,255,0.5); +} + +.video-js.player-style-youtube .vjs-play-progress { + background-color: red; +} + +.video-js.player-style-youtube .vjs-progress-control:hover .vjs-progress-holder { + font-size: 15px; +} + +.video-js.player-style-youtube .vjs-control-bar > .vjs-spacer { + flex: 1; + order: 2; +} + +.video-js.player-style-youtube .vjs-play-progress .vjs-time-tooltip { + display: none; +} + +.video-js.player-style-youtube .vjs-play-progress::before { + color: red; + font-size: 0.85em; + display: none; +} + +.video-js.player-style-youtube .vjs-progress-holder:hover .vjs-play-progress::before { + display: unset; +} + +.video-js.player-style-youtube .vjs-control-bar { + display: flex; + flex-direction: row; +} + +.video-js.player-style-youtube .vjs-big-play-button { + /* + Styles copied from video-js.min.css, definition of + .vjs-big-play-centered .vjs-big-play-button + */ + top: 50%; + left: 50%; + margin-top: -0.81666em; + margin-left: -1.5em; +} + +.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu { + margin-bottom: 2em; +} + ul.vjs-menu-content::-webkit-scrollbar { display: none; } @@ -93,7 +165,7 @@ ul.vjs-menu-content::-webkit-scrollbar { color: rgba(0, 182, 240, 1); } -.video-js .vjs-play-progress { +.video-js.player-style-invidious .vjs-play-progress { background-color: rgba(0, 182, 240, 1); } vjs-menu-content @@ -150,25 +222,6 @@ video.video-js { height: 0; } -.video-js.player-style-invidious { - /* This is already the default */ -} - -.video-js.player-style-youtube .vjs-control-bar { - display: flex; - flex-direction: row; -} -.video-js.player-style-youtube .vjs-big-play-button { - /* - Styles copied from video-js.min.css, definition of - .vjs-big-play-centered .vjs-big-play-button - */ - top: 50%; - left: 50%; - margin-top: -0.81666em; - margin-left: -1.5em; -} - .mobile-operations-bar { display: flex; position: absolute; diff --git a/assets/js/player.js b/assets/js/player.js index e6a6dbac..68fc805b 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -14,6 +14,7 @@ var options = { 'durationDisplay', 'progressControl', 'remainingTimeDisplay', + 'Spacer', 'captionsButton', 'qualitySelector', 'playbackRateMenuButton',