# Go fullscreen and lock orientation
Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
> **Note**
>
> Using a pre-built [skin](https://videojs.org/docs/framework/react/guides/skins)? It already includes the controls shown here. You may still need the media or player setup in this guide. The component examples are for building your own player UI from individual [components](https://videojs.org/docs/framework/react/guides/ui-components).
## Recommended approach
Add a [FullscreenButton](https://videojs.org/docs/framework/react/reference/components/fullscreen-button) inside the player container. It requests fullscreen on the container, so everything inside it — controls, captions, overlays — stays visible in the fullscreen presentation.
**App.tsx**
```tsx
import { Container, createPlayer, FullscreenButton } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const { Player } = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
}
/>
);
}
```
**App.css**
```css
.media-container {
position: relative;
}
.media-container video {
width: 100%;
}
.media-fullscreen-button {
position: absolute;
right: 10px;
bottom: 10px;
padding-block: 8px;
padding-inline: 20px;
color: black;
cursor: pointer;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
backdrop-filter: blur(10px);
}
```
## How it works
The [fullscreen feature](https://videojs.org/docs/framework/react/reference/api/feature-fullscreen) tracks fullscreen state and provides the actions:
- `fullscreen` is `true` while the player is fullscreen, from any path — your button, native controls, or the platform presentation.
- `fullscreenAvailability` is `'available'`, `'unavailable'`, or `'unsupported'`. It starts as `'unavailable'`, then settles to `'available'` or `'unsupported'` when the feature attaches to a media element.
- `requestFullscreen()`, `exitFullscreen()`, and `toggleFullscreen()` change the presentation. Requests target the player container when the Fullscreen API is available, falling back to the media element’s native presentation otherwise.
Fullscreen and picture-in-picture are exclusive: requesting fullscreen exits an active picture-in-picture presentation first.
Style fullscreen state through the container’s `:fullscreen` pseudo-class, or through the `fullscreen` state in components.
## Availability and constraints
- Fullscreen requests must come from a user gesture; browsers reject requests outside one.
- iPhone Safari has no element Fullscreen API. The player falls back to the video’s native fullscreen presentation, which shows the system player UI instead of your custom controls. iPads support element fullscreen.
- Orientation locking requires the Screen Orientation API with lock support — in practice, Android browsers in fullscreen. iOS doesn’t support programmatic orientation lock.
- Inside iframes, fullscreen needs `allow="fullscreen"` on the embedding iframe.
## Common variations
### Lock orientation while fullscreen
Add `orientationLockFeature` to lock screen orientation while the player is fullscreen. It isn’t part of `videoFeatures`, so the preset `VideoPlayer` doesn’t include it. It locks to `landscape` by default and unlocks on exit.
Because the feature list changes, build the player yourself with [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) — the escape hatch for custom feature sets:
```tsx
import { Container, createPlayer, orientationLockFeature } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const { Player } = createPlayer({
features: [...videoFeatures, orientationLockFeature],
});
export default function App() {
return (
);
}
```
To lock to something other than `landscape`, set `orientationLockType` on the player. See the [orientation lock feature](https://videojs.org/docs/framework/react/reference/api/feature-orientation-lock) reference for details.
### Double-click to toggle
Use the `Gesture` component — the default skins ship this exact binding. Keep the button as the accessible path; gestures are a pointer-only shortcut.
```tsx
import { Gesture } from '@videojs/react';
```
`region="center"` keeps the gesture off the left and right thirds, which the default skins reserve for double-tap seeking. See [Add keyboard shortcuts and gestures](https://videojs.org/docs/framework/react/guides/keyboard-shortcuts) for the full gesture surface.
## Troubleshooting
### The fullscreen request is rejected
The request didn’t come from a user gesture, fullscreen is unsupported, or an embedding iframe lacks `allow="fullscreen"`.
### Custom controls disappear in fullscreen on iPhone
Expected: iPhone Safari uses the native video presentation, which replaces custom UI with system controls. Design mobile controls assuming this fallback.
### Orientation doesn’t lock
Orientation lock works in fullscreen on Android browsers; iOS doesn’t support it. Confirm `orientationLockFeature` is in your feature list.
## Related pages
### Components
- [FullscreenButton](https://videojs.org/docs/framework/react/reference/components/fullscreen-button): Accessible fullscreen toggle button with keyboard support and state reflection
- [Container](https://videojs.org/docs/framework/react/reference/components/player-container): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
### API
- [Fullscreen](https://videojs.org/docs/framework/react/reference/api/feature-fullscreen): Fullscreen state and actions for the player store
- [Orientation lock](https://videojs.org/docs/framework/react/reference/api/feature-orientation-lock): Screen orientation locking while fullscreen is active
### Guides
- [Use picture-in-picture](https://videojs.org/docs/framework/react/guides/picture-in-picture): Pop the video into a floating window, with availability detection and state that tracks every entry path.
---
React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt