# Video.js Sandbox - Responsive

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+)

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

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

Class | Player Width
--- | ---