Skip to content
FrameworkStyle

Container

The player's visual and interaction surface for layout, fullscreen, focus, and user activity.

The Container is the player’s physical surface. It defines the visual boundary, attaches the media element, and detects user interaction like activity and (eventually) gestures and keyboard input. It lives inside a Player.

<Player>
  <Container>
    <video src="video.mp4" />
    <Controls.Root>
      {/* ... */}
    </Controls.Root>
  </Container>
</Player>

How it’s created

Import Container from the main React package. It connects to whichever Player contains it, so it does not need to be created for a specific feature set.

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

const { Player } = createPlayer({ features: videoFeatures });
createPlayer reference

What it does

Layout & fullscreen

The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on Container, not Player.

<Container style={{ width: 640, aspectRatio: '16/9' }}>
  <video src="video.mp4" />
  <Controls.Root>
    {/* ... */}
  </Controls.Root>
</Container>

When the user goes fullscreen, the container goes fullscreen — not the video element. This keeps controls and other UI visible on top of the video, since they’re children of the container.

Media attachment

Media discovery is handled by Player, not Container. When a media component like <Video> registers itself via context, Player wires it to the store and all of the player’s features.

Interaction surface

The container is where user intent enters the player. It listens for physical interaction on its surface and translates that into player behavior:

  • User activity — Mouse movement, touch, and keyboard activity within the container drive idle detection. This is how controls know when to show and hide.
  • Gestures — Click-to-play, double-click fullscreen, swipe to seek, and other touch/mouse gestures. Configured via the Gesture component.
  • Keyboard controls — Spacebar to play/pause, arrow keys to seek, and other keyboard shortcuts scoped to the container. Configured via the Hotkey component.

Relationship to skins

A skin is a container plus UI controls. When you use a packaged skin, the container is built in — you don’t need to add one yourself.

{/* Packaged skin — container is inside VideoSkin */}
<Player>
  <VideoSkin>
    <Video src="video.mp4" />
  </VideoSkin>
</Player>

{/* Custom UI — you use Container directly */}
<Player>
  <Container>
    <video src="video.mp4" />
    <PlayButton />
  </Container>
</Player>

Inside vs. outside the container

Player gives components access to state and actions. Container layers on physical behaviors — fullscreen, activity detection, and gesture handling. Components work in both places; the container just adds those extras.

<Player>
  <Container>
    <video src="video.mp4" />
    <Controls.Root>          {/* fullscreen, activity detection, gestures */}
      {/* ... */}
    </Controls.Root>
  </Container>

  <Transcript />          {/* state & actions, but no container behaviors */}
  <PlaylistSidebar />     {/* state & actions, but no container behaviors */}
</Player>

A play button outside the container still reads playback state and can toggle play/pause — it just won’t go fullscreen with the player or respond to the container’s idle state.