Modifies CSS of video elements, setting object-fit to 'contain' and adjusting dimensions for different aspect ratios, including fullscreen mode.
As of
// ==UserScript==
// @name fun.autoblow.com Video CSS Modifier
// @version 1.0
// @description Modifies CSS of video elements, setting object-fit to 'contain' and adjusting dimensions for different aspect ratios, including fullscreen mode.
// @match https://fun.autoblow.com/*
// @grant none
// @namespace https://greasyfork.org/users/1371886
// ==/UserScript==
(function() {
'use strict';
// Function to modify the CSS
function modifyVideoCSS(videoElement) {
if (videoElement) {
// Get the parent element of the video
const parentElement = videoElement.parentElement;
if (parentElement) {
// Set object-fit to contain in the CSS
parentElement.style.objectFit = 'contain';
// Check if in fullscreen mode
if (document.fullscreenElement) {
videoElement.style.width = 'auto';
videoElement.style.height = '100%';
} else {
videoElement.style.width = '100%';
videoElement.style.height = 'auto';
}
// Ensure object-fit is also set on the video element
// videoElement.style.objectFit = 'contain';
console.log('Video CSS updated successfully');
} else {
console.log('Video parent element not found');
}
}
}
// Function to check for video element
function checkForVideo() {
const videoElement = document.querySelector('video');
if (videoElement) {
modifyVideoCSS(videoElement);
}
}
// Set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
checkForVideo();
}
});
});
// Start observing the document with the configured parameters
observer.observe(document.body, { childList: true, subtree: true });
// Run the check immediately in case the video is already present
checkForVideo();
// Add event listener for possible video source changes
document.addEventListener('loadeddata', (event) => {
if (event.target.tagName.toLowerCase() === 'video') {
modifyVideoCSS(event.target);
}
}, true);
// Add event listeners for fullscreen changes
document.addEventListener('fullscreenchange', checkForVideo);
document.addEventListener('webkitfullscreenchange', checkForVideo);
document.addEventListener('mozfullscreenchange', checkForVideo);
document.addEventListener('MSFullscreenChange', checkForVideo);
})();