# Orientation lock

Screen orientation locking while fullscreen is active

Locks screen orientation while fullscreen is active.

## Import

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

No packaged [feature bundle](https://videojs.org/docs/framework/react/guides/presets) includes this feature — add it to your [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) features yourself.

## API Reference

### Configuration

Props the Player component accepts. They exist only while this feature is selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientationLockType` | `undefined \| null \| 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | `'landscape'` | Screen orientation type to lock while fullscreen is active. |

### State

| Property | Type | Description |
| --- | --- | --- |
| `orientationLockType` | `'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary'` | Screen orientation type locked while fullscreen is active. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `setOrientationLockType` | `(value: 'any' \| 'landscape' \| 'landscape-primary' \| 'landscape-secondary' \| 'natural' \| 'portrait' \| 'portrait-primary' \| 'portrait-secondary' \| null \| undefined) => void` | Sets the locked orientation type. A missing value, including an empty one, restores the default. |

### Usage

Selecting the feature adds it to the player.

**player.tsx**

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

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

### Orientation type

The feature locks to `landscape` unless the provider sets another Screen Orientation API type. The value can change while the player is running; if the screen is already locked, it re-locks to the new type.

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

Clearing the value restores `landscape`.

### Selector

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

**OrientationToggle.tsx**

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

function OrientationToggle() {
  const lock = usePlayer(selectOrientationLock);
  if (!lock) return null;

  return (
    <button onClick={() => lock.setOrientationLockType('portrait')}>
      Lock portrait
    </button>
  );
}
```

Unsupported browsers and rejected lock requests are ignored.

---

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