Layout and sizing

info

Available after version 3.0.0

Size does matter when it comes to screens, so we made it easy to make things fit. Rule of thumb: the player will always take the width and height of the selected element, and try to maximally fit in it.

Player gallery

Check out our video player gallery with the matching css rules

Loading... Loading...	Player with static width and height, empty space filled by letterboxing .video-player-container { width: 300px; height: 240px; }
Loading... Loading...	Player constrained on width (300px), allowing max height of 300px; empty space filled by letterboxing .video-player-container { width: 300px; max-height: 300px; }
Loading... Loading...	Enforcing an aspect ratio 16/9 for the player; The video is letterboxed if necessary .video-player-container { width: 300px; aspect-ratio:16/9; }
Loading... Loading...	Responsive and letterboxed .video-player-container { width: 50%; max-height: 200px; }
Loading... Loading...	Letterboxing disabled, constrained on the height only to make it fit; .video-player-container { max-height: 200px; } new Player( "#video-container", { streaming: 'dreams-of-caffeine.mp4', noLetterboxing: true } )

note

Did we miss a config? Let us know and we'll make it available!

Showing and hiding player elements

We added control to the controls:

{
  // hide the play bar after 3 seconds of no user activity, 0 -> don't hide 
  playbarTimeout: 3,

  // in case of not enough space, the volume bar will become vertical and after the following breakpoint it will dissappear
  volumeBreakpoint: 300,
  // this is where the timers dissappear
  timerBreakpoint: 400,
  // playback rate is not available under this size
  playbackRateBreakpoint: 500,
  // too narrow to display progress bellow this
  progressBreakpoint: 200,

  // hide and seek for the different elements in the control bar
  showPlaybar: true,
  showPlayButton: true,
  showProgress: true,
  showTimer: true,
  showPlaybackRate: true,
}