Render it inside Player.Root, next to a Media.Video or Media.Audio.
Anatomy
<FullscreenButton.Root />
API reference
It accepts the attributes of the <button> it renders, plus a ref, and sets the media state attributes. Passing aria-label replaces a default label.
FullscreenButton.Root
renders <button>
Toggles fullscreen for the Player.Container in the same Player.Root; without one, nothing happens. Browsers that can only make the video itself fullscreen, such as Safari on iPhone, do that instead. Place the button inside the container so it stays visible in fullscreen.
Its aria-label is "Enter fullscreen", or "Exit fullscreen" while fullscreen.
Data attribute
Description
data-fullscreen
The player is fullscreen.
Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.
Media state attributes
Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.
Data attribute
Description
data-media-pending
Loading hasn’t started. This is the initial state.
data-media-loading
The media has started loading.
data-media-metadata-loaded
The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable
The media can play. It stays set if playback later stalls to buffer.
data-media-error
The media element reported an error, such as a network or decoding failure. A blocked play() call doesn’t set it; use onError for that.
data-fullscreen-unsupported
The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported
Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported
The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.