<media-fullscreen-button>

The <media-fullscreen-button> component is used to toggle fullscreen viewing.

The contents and behavior of the <media-fullscreen-button> will update automatically based on the fullscreen state and availability.

• When the media is not fullscreen, the component will switch to display the contents of the enter slot.
• When the media is fullscreen, the component will switch to display the contents of the exit slot.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-fullscreen-button></media-fullscreen-button>
</media-controller>

You can modify the contents of the <media-fullscreen-button> component using slots. This is useful if you’d like to use your own custom fullscreen button instead of the default one provided by media-chrome.

Here’s an example of how you can replace the default fullscreen icons with the words “Enter” and “Exit”

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-fullscreen-button>
    <span slot="enter">Enter</span>
    <span slot="exit">Exit</span>
  </media-fullscreen-button>
</media-controller>

The <media-fullscreen-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the fullscreen state and availability changes.

You can use these attributes to style the button. For example, hide the button if fullscreen is unavailable:

media-fullscreen-button:not([mediafullscreenunavailable]) {
  display: none;
}

Or make the background blue if the media is fullscreen.

media-fullscreen-button[mediaisfullscreen] {
  --media-control-background: blue;
}

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.