The following boxes indicate which breakpoint should be applied to the player when it fills the width of its containing viewport.

Use these to validate that the default breakpoints match up with how CSS media queries work.

Because these bars are updated by CSS, they will change before the playerresize event occurs!

vjs-layout-tiny (0px-210px)
vjs-layout-x-small (211px-320px)
vjs-layout-small (321px-425px)
vjs-layout-medium (426px-768px)
vjs-layout-large (769px-1440px)
vjs-layout-x-large (1441px-2560px)
vjs-layout-huge (2561px+)
Video Player is loading.
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time -:-
 
1x

Each time the player size changes, a row is prepended to this table.

Class Player Width
vjs-layout-x-small300