Looking for the old docs? Go here

Buttons

Fullscreen Button

This component is used to enter and exit fullscreen on press.

HTMLAttributes<HTMLButtonElement>
Ref<HTMLButtonElement>

A button for toggling the fullscreen mode of the player.

import { FullscreenButton, type FullscreenButtonProps } from "@vidstack/react";
import { FullscreenButton, type FullscreenButtonProps } from "@vidstack/react";
const isActive = useMediaState('fullscreen');

<FullscreenButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</FullscreenButton>
const isActive = useMediaState('fullscreen');

<FullscreenButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</FullscreenButton>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
target
MediaFullscreenRequestTarget
'prefer-media'
CallbackType
onMediaEnterFullscreenRequest
function
onMediaExitFullscreenRequest
function
NameDescription
data-active
Whether fullscreen mode is active.
data-supported
Whether fullscreen mode is supported.

Previous