Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with a slight extension on the bottom and right sides
目前為
// ==UserScript==
// @name Ultrawide Fix for Kick
// @namespace https://greasyfork.org/en/users/1200587-trilla-g
// @version 1.7
// @description Adjust video player to maintain 21:9 aspect ratio, filling screen minus sidebars and toolbars with a slight extension on the bottom and right sides
// @match *://kick.com/*
// @grant none
// @license MIT
// @author Trilla_G
// ==/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
let leftSidebarWidth = 256; // Left sidebar width
let rightSidebarWidth = 340; // Right sidebar width
let totalSidebarWidth = leftSidebarWidth + rightSidebarWidth; // Total width of both sidebars
let topToolbarHeight = 50; // Estimate for top toolbar
let bottomToolbarHeight = 0; // Adjust bottom toolbar height to allow full screen fitting
// Calculate available width and height
let viewportWidth = window.innerWidth; // Full viewport width
let viewportHeight = window.innerHeight; // Full viewport height
let availableWidth = viewportWidth - totalSidebarWidth; // Width after accounting for sidebars
let availableHeight = viewportHeight - topToolbarHeight - bottomToolbarHeight; // Height after toolbars
// Maintain a 21:9 aspect ratio
let desiredHeight = availableWidth / (21 / 9); // Calculate height based on 21:9 aspect ratio
if (desiredHeight > availableHeight) {
// If the calculated height is taller than the available height, adjust the width instead
videoElement.style.height = `${availableHeight + 40}px`; // Further extend the height by 40px
videoElement.style.width = `${(availableHeight + 40) * (21 / 9)}px`; // Adjust width based on new height
} else {
// Otherwise, use the calculated height
videoElement.style.width = `${availableWidth + 40}px`; // Further extend the width by 40px
videoElement.style.height = `${desiredHeight + 40}px`; // Extend the height by 40px
}
// Center the video element
videoElement.style.position = 'fixed'; // Use fixed positioning
videoElement.style.left = `${leftSidebarWidth}px`; // Offset for the left sidebar
videoElement.style.top = `${topToolbarHeight - 10}px`; // Move it slightly lower
videoElement.style.objectFit = 'cover'; // Fill the screen, cropping if needed
}
};
// Function to check if the URL is a VOD page
let isVodPage = (url) => {
const regex = /^https:\/\/kick\.com\/[^\/]+\/videos/; // Matches kick.com/ANYUSERNAMEHERE/videos/
return regex.test(url);
};
// Function to handle URL changes and trigger the script
let handleUrlChange = () => {
adjustVideoElement(); // Always adjust the video element
};
// 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(); // Trigger on navigation to a new URL
};
// Continuously adjust video element every 500ms
setInterval(adjustVideoElement, 500);
})();