Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment
目前為
// ==UserScript==
// @name Ultrawide Fix for Kick
// @namespace https://greasyfork.org/en/users/1200587-trilla-g
// @version 1.12
// @description Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with minimal cropping, with dynamic full-screen adjustment
// @match *://kick.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Function to adjust the video element considering sidebars and maintain 21:9 aspect ratio
let adjustVideoElement = () => {
// Select the <video> element
let videoElement = document.querySelector("video");
if (videoElement) {
// Sidebar and toolbar dimensions (only apply if not in full-screen mode)
let leftSidebarWidth = 259;
let rightSidebarWidth = 345;
let topToolbarHeight = 70;
// Check if the document is in full-screen mode
if (document.fullscreenElement) {
// Full-screen mode: fill entire screen with 21:9 aspect ratio
videoElement.style.width = '100vw';
videoElement.style.height = 'calc(100vw / (21 / 9))';
videoElement.style.position = 'fixed';
videoElement.style.left = '0';
videoElement.style.top = '0';
} else {
// Non-full-screen mode: adjust for sidebars and toolbar
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
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`;
}
// Ensure the video fits within the container without significant cropping
videoElement.style.objectFit = 'fill';
}
};
// Function to handle URL changes and trigger the script
let handleUrlChange = () => {
adjustVideoElement();
};
// Run the adjustment initially
handleUrlChange();
// Monitor for changes in the page state
window.addEventListener('popstate', handleUrlChange);
window.addEventListener('pushState', handleUrlChange);
// Override pushState to handle dynamic content changes
let originalPushState = history.pushState;
history.pushState = function() {
originalPushState.apply(this, arguments);
handleUrlChange();
};
// Adjust on full-screen change events
document.addEventListener('fullscreenchange', adjustVideoElement);
// Continuously adjust video element every 500ms
setInterval(adjustVideoElement, 500);
})();