全屏模式下z-index失效：Twitch嵌入视频遮挡元素修复方案

Alright, let's tackle this problem you're facing: when your Twitch embed goes fullscreen, your custom .cr_display_logo element gets hidden behind the iframe, even with a high z-index. I’ve looked at your demo and code, so here’s the breakdown and solution.

Why This Happens #

When any video element (including Twitch’s embedded player) enters fullscreen mode, browsers move it into a separate, top-level rendering layer that’s completely outside the normal DOM flow. Your custom element lives in the regular DOM, so no matter how high you set its z-index, it can’t break through this browser-managed fullscreen layer.

Solution: Sync Your Custom Element with the Fullscreen Container #

The fix is to move your custom element into the same fullscreen container as the Twitch player when fullscreen is activated. This way, they’re in the same rendering layer, and z-index will work as expected. Here’s how to implement it with your code:

Step 1: Update Your CSS #

First, set up base styles for your logo to ensure it positions correctly in both normal and fullscreen modes:

#twitch-embed {
  position: relative;
  width: 854px;
  height: 480px;
}

.cr_display_logo {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  z-index: 9999;
  pointer-events: none; /* Prevents blocking player interactions (remove if you need the logo to be clickable) */
}

Step 2: Add Fullscreen Event Handling with Twitch Player API #

Instead of relying on browser generic fullscreen events, use Twitch’s own player events to detect fullscreen state changes. This is more reliable for Twitch embeds:

<div id="twitch-embed">
  <div class="cr_display_logo">TEST</div>
</div>

<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
  var embed = new Twitch.Embed("twitch-embed", {
    width: 854,
    height: 480,
    channel: "tonyteo2018",
    layout: "video",
    autoplay: false
  });

  embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
    var player = embed.getPlayer();
    
    // Listen for Twitch player's fullscreen state changes
    player.addEventListener(Twitch.Player.FULLSCREEN, (isFullscreen) => {
      const logo = document.querySelector('.cr_display_logo');
      const embedContainer = document.getElementById('twitch-embed');
      
      if (isFullscreen) {
        // Get Twitch's fullscreen container (auto-created by the player)
        const fullscreenContainer = document.querySelector('.player-fullscreen');
        if (fullscreenContainer) {
          fullscreenContainer.appendChild(logo);
        }
      } else {
        // Move logo back to original container when exiting fullscreen
        embedContainer.appendChild(logo);
      }
    });

    player.play();
  });
</script>

How This Works #

• When the Twitch player enters fullscreen, it creates a .player-fullscreen container that’s the top-level fullscreen element. We move our logo into this container, so it’s now in the same rendering layer as the player.
• When exiting fullscreen, we move the logo back to its original position in the #twitch-embed container to maintain normal layout.

Alternative: Use Browser Fullscreen Events (For Wider Compatibility) #

If you need to support edge cases where Twitch’s player event doesn’t fire, you can listen to browser-native fullscreen events (with prefixes for older browsers):

function handleFullscreenChange() {
  const logo = document.querySelector('.cr_display_logo');
  const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
  
  if (fullscreenElement) {
    fullscreenElement.appendChild(logo);
    logo.style.position = 'absolute';
    logo.style.top = '20px';
    logo.style.left = '20px';
  } else {
    document.getElementById('twitch-embed').appendChild(logo);
  }
}

// Attach listeners for all browser fullscreen events
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);

Key Notes #

• Pointer Events: The pointer-events: none style ensures your logo doesn’t block clicks on the Twitch player (like pause, volume, or fullscreen buttons). Remove this if you need users to interact with the logo.
• Z-Index: Make sure your logo’s z-index is higher than any other elements inside the fullscreen container (Twitch’s UI elements typically use lower z-index values, so 9999 should work).

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