如何通过jQuery或JS移除Vimuse播放器暂停时的YouTube相关视频及元素？

Hey there! I totally get how frustrating those pause overlays and random related videos can be when using the Vimuse player. Let's break down practical solutions since your initial CSS override didn't stick—this is usually due to style precedence or dynamic element loading that YouTube uses.

First Check: Vimuse Built-in Settings #

Before diving into code, take a quick peek at the Vimuse player's configuration panel. Many video players (especially those wrapping YouTube) have a built-in toggle to disable related videos. If you spot an option like "Show Related Videos" or "Pause Overlay", just flip it off—this is the simplest fix if it exists!

Solution 1: Force CSS Override (Higher Precedence) #

Your initial CSS might not have worked because YouTube's styles have stronger specificity. Try using a more targeted selector plus !important to force your styles to take priority:

/* Target overlays with a parent selector to boost specificity */
.ytp-player .ytp-expand-pause-overlay,
.ytp-player .ytp-pause-overlay {
    display: none !important;
    visibility: hidden !important; /* Extra layer to ensure they're fully hidden */
}

• Adding .ytp-player as a parent selector makes your styles more specific than YouTube's default rules.
• !important overrides any inline or higher-priority styles from YouTube's CSS file.

Solution 2: jQuery/JavaScript for Dynamic Elements #

If the overlays load dynamically after the page loads (which YouTube often does), CSS alone might not catch them. Here's a simple jQuery method perfect for beginners:

// Check every 500ms for overlay elements and hide them
setInterval(function() {
    // Hide the overlays immediately when detected
    $('.ytp-expand-pause-overlay, .ytp-pause-overlay').hide();
    // Optional: Remove elements entirely instead of just hiding
    // $('.ytp-expand-pause-overlay, .ytp-pause-overlay').remove();
}, 500);

• This timer runs every half-second, so it'll catch the overlays as soon as they pop up when the video pauses.
• .hide() is straightforward, but .remove() will delete the elements from the DOM entirely if you prefer that approach.

Bonus: More Efficient Mutation Observer (Advanced) #

If you want a cleaner, less resource-heavy alternative to a timer, use a Mutation Observer to watch for when the overlays are added to the DOM:

// Create an observer to detect new elements in the page
const overlayObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Check if any new nodes were added to the DOM
        if (mutation.addedNodes.length) {
            // Find and hide the overlay elements
            const pauseOverlays = document.querySelectorAll('.ytp-expand-pause-overlay, .ytp-pause-overlay');
            pauseOverlays.forEach(function(overlay) {
                overlay.style.display = 'none';
                overlay.style.visibility = 'hidden';
            });
        }
    });
});

// Start observing the entire body (or target the Vimuse player container for better performance)
overlayObserver.observe(document.body, {
    childList: true,
    subtree: true
});

• This method only acts when the overlays are actually added to the page, so it's more efficient than a constant timer.
• If you can locate the specific container div for the Vimuse player, replace document.body with that element to narrow down the observation range.

Final Tips #

• Make sure your CSS/JS code loads after the YouTube player and Vimuse scripts. Loading your code later ensures it can target the elements correctly.
• Clear your browser cache after adding the code—sometimes old styles or scripts stick around and cause unexpected behavior.

内容的提问来源于stack exchange，提问作者Rex