Dynamic Overlay with UserId on MuxPlayer Disappears in Fullscreen Mode

I’m using the MuxPlayer component for video on my website and have created an overlay that displays the userId dynamically. The overlay works perfectly in normal mode, but it disappears when the video enters fullscreen mode.

Here is the code I’m using:

<>
  <div className="relative overflow-hidden">
    <div className="absolute inset-0 bg-black text-white bg-opacity-20 flex justify-center items-center z-40">
      {userId}
    </div>
    <MuxPlayer
      title={title}
      playbackId={playbackId}
      className={cn(!isReady && "hidden")}
      onCanPlay={() => setIsReady(true)}
      theme="minimal"
      onEnded={onEnd}
      preload="auto"
      defaultShowRemainingTime
    />
  </div>
</>

The overlay is placed correctly and displays the userId as expected. However, when the player enters fullscreen mode, the overlay disappears. How can I ensure the overlay remains visible in fullscreen mode?

What I’ve Tried

• Ensuring the overlay div has a high z-index.
• Wrapping the entire player component with the overlay div.

Expected Behavior

The overlay should stay visible even when the video enters fullscreen mode, displaying the userId throughout the video playback.

Any help would be greatly appreciated. Thank you!