Feature Request: Named Slot for Custom Overlays in <mux-video>

[Mohamed-Abbas]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player-react, playback-core, new element

Description

Background

The <mux-video> component from Mux is a powerful tool for embedding video content into web applications. While the component currently supports basic video functionalities and some level of customization through attributes, it lacks the ability to directly integrate custom HTML elements such as overlays within its shadow DOM. This limitation restricts developers from adding interactive or informational content directly on top of the video in a seamless manner.

Feature Description

This feature request aims to introduce a named slot within the <mux-video> component’s shadow DOM structure. By adding this slot, developers will be able to insert custom elements, like interactive buttons, promotional banners, or additional informational content, directly overlaying the video element. A practical application of this feature includes the ability to display a notification when the player is in fullscreen mode, enhancing the user's viewing experience by providing timely information without interrupting the video playback.

Expected Behavior

Elements placed in the overlay slot should integrate seamlessly over the video, without causing any disruptions to video playback or control accessibility. Here is an example of how developers might use the new slot in the

 <PrimitiveMuxPlayer ref={innerPlayerRef} playbackId={playbackId}>
   <div
     slot="overlay"
     className="absolute inset-0 z-50 overflow-hidden pointer-events-none"
   >
     {children}
   </div>
 </PrimitiveMuxPlayer>