Buttons
Fullscreen Button
This component is used to enter and exit fullscreen on press.
Explorer
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
example.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
example.tsx
1 2 3 4 5 6 7 8
example.tsx
1 2 3 4 5 6 7 8
example.tsx
1 2 3 4 5 6 7 8
API Reference
Section titled API ReferenceHTMLAttributes<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>
Props
Section titled PropsProp | Type | Default |
---|---|---|
| boolean | false |
| ReactNode | null |
| boolean | undefined |
| MediaFullscreenRequestTarget | 'prefer-media' |
Callbacks
Section titled CallbacksCallback | Type |
---|---|
| function |
| function |
Data Attributes
Section titled Data AttributesName | Description |
---|---|
| Whether fullscreen mode is active. |
| Whether fullscreen mode is supported. |
Previous
Next