Player sizing

The player always mounts inside the container element you pass to new EvePlayer(container, options). Two options decide how big the player's box is inside that container: fluid and widescreen.

Options	Width	Height	The box changes with the media?
default (fluid: true)	the container's	from the media's aspect ratio (16:9 until it is known)	yes
widescreen: true	the container's	always 16:9	no
fluid: false	the media's intrinsic size	the media's intrinsic size	yes, size it with your CSS

Default: the box follows the video

With no sizing options the player takes the full width of its container and derives its height from the video:

new EvePlayer(container);

Until the media's dimensions are known the box is 16:9. Once they are, it adapts: a 2.39:1 film gives a wider, shorter box, a vertical 9:16 video a taller one. There are never black bars, but the page around the player can shift when the box resizes, and it is 0px tall before the player script runs.

This is the right choice for most pages.

widescreen: a fixed 16:9 frame

new EvePlayer(container, { widescreen: true });

widescreen adds the vjsp-widescreen class to the container, which gives it aspect-ratio: 16 / 9; width: 100%, and makes the player fill that frame. The box is 16:9 whatever the media is: a video with another aspect ratio is letterboxed (or pillarboxed) in black inside it.

Use it when the space has to be known before the media loads:

• Server-rendered pages. When the player is loaded on the client only (see SSR / Next.js), put the same class on the placeholder so the page reserves the space and does not jump when the player appears:

  <div id="player-container" class="vjsp-widescreen"></div>

• Grids, carousels, lists of tiles. Every player keeps the same frame whatever video it plays.

Another frame

The 16:9 comes from a plain CSS rule on the container, so you can override it and keep the "player fills the container" behaviour:

/* A 4:3 frame */
#player-container.vjsp-widescreen {
  aspect-ratio: 4 / 3;
}

/* A fixed height, for example a hero banner */
#player-container.vjsp-widescreen {
  aspect-ratio: auto;
  height: 60vh;
}

Crop instead of letterboxing

To fill the whole frame with the picture (cropping the edges that do not fit), as you would for a hero or background video:

#player-container video {
  object-fit: cover;
}

Audio-only sources

An audio-only source collapses the player to its control bar, and the widescreen frame collapses with it instead of leaving an empty 16:9 box.

note

Before @admmedia/eveplayer 1.0.2, widescreen only shaped the container: the player inside still followed the media's aspect ratio, so a non-16:9 video left an empty band below it (or overflowed with fluid: false).

fluid: false: size it with your own CSS

new EvePlayer(container, { fluid: false });

Without fluid mode the player is laid out at the media's intrinsic pixel size (960×400 for a 960×400 file), regardless of the container. Use it only when your CSS sizes the player; target the player root inside your container:

#player-container {
  width: 100%;
  aspect-ratio: 4 / 3; /* or a fixed height, or a grid cell, … */
}

#player-container .video-js {
  width: 100%;
  height: 100%;
}

With widescreen set, fluid no longer affects the box: the 16:9 frame wins either way.

Fullscreen and picture-in-picture

Neither option affects fullscreen, which always fills the screen. The picture-in-picture window is 16:9 when widescreen is set and follows the media otherwise.