Skip to main content

Background mode

The background constructor option turns the player into a decorative backdrop (for sitting behind a card, a hero section, or any other box of UI) rather than something a viewer interacts with directly.

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

Setting background: true implies hideControls and additionally:

  • Defaults autoplay, muted and loop to true, but only for values you haven't set explicitly, so { background: true, loop: false } still plays once.
  • Hides the loading spinner and the error overlay, so no player chrome ever flashes over the content sitting on top. Playback errors are still available via the error event if you want to log them.
  • Disables the native browser right-click context menu on the video (which can otherwise re-enable native controls via "Show controls").
  • Marks the container aria-hidden="true", since there is nothing for a screen reader to announce or a keyboard user to reach.

Clicking or tapping the video does nothing in this mode (same as with hideControls alone), since disabling controls also removes Video.js's click-to-toggle-play/fullscreen handlers, not just the control bar.

Layering content on top​

Position your own UI over the player with regular CSS; nothing in background mode changes pointer-event routing, so an overlay that fully covers the player already receives all clicks/taps normally:

<div style="position: relative;">
  <div id="player-container"></div>
  <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
    <!-- your box -->
  </div>
</div>
new EvePlayer(document.getElementById('player-container')!, {
  background: true,
  widescreen: true,
});

To fill a hero of any shape and crop the picture instead of letterboxing it, override the frame and set object-fit (see Player sizing):

#player-container.vjsp-widescreen {
  aspect-ratio: auto;
  height: 100%;
}

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