# 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](https://videojs.org/docs/framework/html/guides/presets) includes this feature — add it to your [`createPlayer`](https://videojs.org/docs/framework/html/reference/api/html-create-player) 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`](https://videojs.org/docs/framework/html/reference/api/player-controller) 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.

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt