☰

fun.autoblow.com Video CSS Modifier

Modifies CSS of video elements, setting object-fit to 'contain' and adjusting dimensions for different aspect ratios, including fullscreen mode.

当前为 2024-09-23 提交的版本，查看 最新版本。

// ==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);
})();