---
title: Fullscreen
description: Fullscreen state and actions for the player store
---

import FeatureReference from "@/components/docs/api-reference/FeatureReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

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

<FeatureReference feature="fullscreen" />

### Selector

<FrameworkCase frameworks={["react"]}>
Pass `selectFullscreen` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
Pass `selectFullscreen` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to fullscreen state. Returns `undefined` if the fullscreen feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx title="FullscreenButton.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>
  );
}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```ts title="fullscreen-button.ts"
import { createPlayer, MediaElement, selectFullscreen } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class FullscreenButton extends MediaElement {
  readonly #fullscreen = new PlayerController(this, context, selectFullscreen);
}
```
</FrameworkCase>

### Screen orientation

Add <DocsLink slug="reference/feature-orientation-lock">`features.orientationLock`</DocsLink> 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.

By default, the feature locks to `landscape`. Pass a Screen Orientation API type to customize it:

```ts
import { createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({
  features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
});
```
