# Orientation lock

Screen orientation locking while fullscreen is active

Locks screen orientation while fullscreen is active.

## Import

```ts
import { orientationLockFeature } from '@videojs/html';
```

No packaged [feature bundle](../../guides/presets.md) includes this feature — add it to your [`createPlayer`](./html-create-player.md) features yourself.

## API Reference

### Configuration

Attributes and matching properties the player element accepts. They exist only while this feature is selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientationLockType` (attribute `orientation-lock-type`) | `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.ts**

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

const { PlayerElement: MyPlayer } = createPlayer({
  features: [...videoFeatures, features.orientationLock],
});

customElements.define('my-player', MyPlayer);
```

### 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.

```html
<my-player orientation-lock-type="portrait">
  <video src="/video.mp4"></video>
</my-player>
```

The attribute only exists on a player that selected the feature. Setting it on an element built from `videoFeatures` alone does nothing.

Clearing the value restores `landscape`.

### Selector

Pass `selectOrientationLock` to [`PlayerController`](./player-controller.md) to subscribe to the lock state. Returns `undefined` if the orientation lock feature is not configured.

**orientation-toggle.ts**

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

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

class OrientationToggle extends UIElement {
  readonly #lock = new PlayerController(this, selectOrientationLock);
}
```

Unsupported browsers and rejected lock requests are ignored.