---
title: Orientation lock
description: Screen orientation locking while fullscreen is active
---

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

Locks screen orientation while fullscreen is active. Add it explicitly to a feature list; it is not included in the default video presets.

<FeatureReference feature="orientationLock" />

### Usage

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

<FrameworkCase frameworks={["react"]}>
```tsx title="player.tsx"
import { createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

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

<FrameworkCase frameworks={["html"]}>
```ts title="player.ts"
import { createPlayer, features } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const player = createPlayer({
  features: [...videoFeatures, features.orientationLock],
});
```
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx title="portrait-player.tsx"
import { createPlayer, features } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

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

<FrameworkCase frameworks={["html"]}>
```ts title="portrait-player.ts"
import { createPlayer, features } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const player = createPlayer({
  features: [...videoFeatures, features.orientationLock({ type: 'portrait' })],
});
```
</FrameworkCase>

Unsupported browsers and rejected lock requests are ignored.
