Customize video and chat layout on YouTube watch page
// ==UserScript==
// @name YouTube Watch Page Chat-Replay CSS
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Customize video and chat layout on YouTube watch page
// @match https://www.youtube.com/watch?v=*
// @grant none
// @license CC0
// ==/UserScript==
(function () {
'use strict';
let styleElement = null;
const css = `/* video */
#player, .html5-main-video, #movie_player {
position: absolute !important;
top: 0px !important;
left: 0px !important;
width: calc(100vw - 420px) !important;
height: calc(105vh - 58px) !important;
object-fit: contain !important;
border: 1px solid #000 !important;
}
.ytp-chrome-bottom {
width: 100vw !important;
}
/* chat */
#chat {
position: absolute !important;
top: -56px !important;
left: 4px !important;
width: 420px !important;
height: 100vh !important;
overflow-y: auto !important;
border-radius: 0px !important;
border: 1px solid #333 !important;
}
/* hide everything else */
#above-the-fold, .ytd-watch-metadata, #comments, #chips, .ytd-watch-next-secondary-results-renderer, .ytd-masthead, #end {
display: none !important;
}
`
document.addEventListener('keydown', function (e) {
// Use F2 as toggle key
if (e.key === 'F2') {
if (styleElement) {
styleElement.remove();
styleElement = null;
} else {
styleElement = document.createElement('style');
styleElement.textContent = css;
document.head.appendChild(styleElement);
}
}
});
})();