ContainerMixin

ContainerMixin creates a class that consumes the player store from context and registers itself as the media container with the provider. The provider uses this reference as the fullscreen target and passes it to store.attach().

What ContainerMixin does

On connectedCallback, the element registers itself with the provider via containerContext. The provider stores the container reference and uses it when calling store.attach({ media, container }). On disconnectedCallback, the element deregisters itself.

Media discovery is owned by the provider — ContainerMixin does not search for or attach media elements.

When to use ContainerMixin

Use ContainerMixin when the provider and container live in different elements. This is common when the store owner sits higher in the tree (e.g., a layout shell) while the media element sits deeper in a content area.

For a single element that both owns the store and attaches the container, compose both mixins on the same base class:

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

class VideoPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}

Split composition

Pair ContainerMixin with ProviderMixin when the store owner is a different element from the container:

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

// Provider owns the store, sits at the top
class PlayerShell extends ProviderMixin(MediaElement) {}

// Container registers as the layout/fullscreen target
class MediaRegion extends ContainerMixin(MediaElement) {}