Adjust video player to maintain 21:9 aspect ratio only on ultrawide screens, auto-disable on 16:9 monitors. Fills screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment.
// ==UserScript==
// @name Ultrawide Fix for Kick (Auto Toggle by Aspect Ratio)
// @namespace https://greasyfork.org/en/users/1200587-trilla-g
// @version 1.19
// @description Adjust video player to maintain 21:9 aspect ratio only on ultrawide screens, auto-disable on 16:9 monitors. Fills screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment.
// @match *://kick.com/*
// @grant none
// @license MIT
// @run-at document-idle
// ==/UserScript==
(function () {
'use strict';
function isUltrawide() {
const aspect = window.innerWidth / window.innerHeight;
// 21:9 is ~2.37, 16:9 is ~1.78 → threshold at 2.0
return aspect > 2.0;
}
function adjustVideoElement() {
let videoElement = document.querySelector("video");
if (!videoElement) return;
if (isUltrawide()) {
let leftSidebarWidth = 259;
let rightSidebarWidth = 345;
let topToolbarHeight = 77;
if (document.fullscreenElement) {
videoElement.style.width = '100vw';
videoElement.style.height = 'calc(100vw / (21 / 9))';
videoElement.style.position = 'fixed';
videoElement.style.left = '0';
videoElement.style.top = '0';
} else {
let viewportWidth = window.innerWidth;
let availableWidth = viewportWidth - (leftSidebarWidth + rightSidebarWidth);
let desiredHeight = availableWidth / (21 / 9);
videoElement.style.width = `${availableWidth}px`;
videoElement.style.height = `${desiredHeight}px`;
videoElement.style.position = 'fixed';
videoElement.style.left = `${leftSidebarWidth}px`;
videoElement.style.top = `${topToolbarHeight}px`;
}
videoElement.style.objectFit = 'fill';
} else {
// Reset to default styles when not ultrawide
videoElement.style.width = "";
videoElement.style.height = "";
videoElement.style.position = "";
videoElement.style.left = "";
videoElement.style.top = "";
videoElement.style.objectFit = "";
}
}
// Observe DOM changes to reapply adjustments
function observeChanges() {
let observer = new MutationObserver(() => adjustVideoElement());
observer.observe(document.body, { childList: true, subtree: true });
}
// Trigger adjustments on relevant events
window.addEventListener('resize', adjustVideoElement);
window.addEventListener('popstate', adjustVideoElement);
document.addEventListener('fullscreenchange', adjustVideoElement);
// Initial adjustment
adjustVideoElement();
// Start observing changes
observeChanges();
})();