Buttons

Fullscreen Button

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

API Reference

HTMLAttributes<HTMLButtonElement>

Ref<HTMLButtonElement>

A button for toggling the fullscreen mode of the player.

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

<FullscreenButton>
  {!isActive ? <EnterIcon /> : <ExitIcon />}
</FullscreenButton> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`disabled`	`boolean`	`undefined`
`target`	`MediaFullscreenRequestTarget`	`'prefer-media'`

Callbacks

Callback	Type
`onMediaEnterFullscreenRequest`	`function`
`onMediaExitFullscreenRequest`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-active`	Whether fullscreen mode is active.
`data-supported`	Whether fullscreen mode is supported.

Fullscreen Button

API Reference

Props

`asChild`

`children`

`disabled`

`target`

Callbacks

`onMediaEnterFullscreenRequest`

`onMediaExitFullscreenRequest`

Data Attributes

`data-active`

`data-supported`