# Fullscreen

Fullscreen state and actions for the player store

Controls fullscreen mode. Tries the container element first, falls back to the media element.

## Import

```tsx
import { fullscreenFeature } from '@videojs/react';
```

The `liveVideoFeatures` and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `fullscreen` | `boolean` | Whether fullscreen mode is currently active. |
| `fullscreenAvailability` | `'available' \| 'unavailable' \| 'unsupported'` | Whether fullscreen can be requested on this platform. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `requestFullscreen` | `() => Promise<void>` | Enter fullscreen mode. Tries container first, falls back to media element. |
| `exitFullscreen` | `() => Promise<void>` | Exit fullscreen mode. |
| `toggleFullscreen` | `() => Promise<void>` | Toggle fullscreen mode. |

### Selector

Pass `selectFullscreen` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.

**FullscreenButton.tsx**

```tsx
import { selectFullscreen, usePlayer } from '@videojs/react';

function FullscreenButton() {
  const fs = usePlayer(selectFullscreen);
  if (!fs || fs.fullscreenAvailability !== 'available') return null;

  return (
    <button onClick={fs.toggleFullscreen}>
      {fs.fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
    </button>
  );
}
```

### Screen orientation

Add [`features.orientationLock`](https://videojs.org/docs/framework/react/reference/api/feature-orientation-lock) to lock screen orientation while fullscreen is active. Unsupported browsers and rejected lock requests are ignored, so iOS Safari continues to use its normal fullscreen behavior.

The feature locks to `landscape` unless the provider sets another Screen Orientation API type.

```tsx
<Player orientationLockType="portrait">
  <Container>
    <Video src="/video.mp4" />
  </Container>
</Player>
```

See [Orientation lock](https://videojs.org/docs/framework/react/reference/api/feature-orientation-lock) for the player setup.

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt