Question: Custom amount of breakpoints

[pchr-srf]

Hello and bonjour 👋

I'm following the guide regarding customizing breakpoints and have a question:

How would one go about using a different number of breakpoints? I.E. what if I only want to support 2 different sizes? For example, 0-200px and 201-infinity

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[amtins]

Hi @pchr-srf, if you want to have only two available sizes, the simplest solution is to use only the tiny breakpoint for 0 to 200px, and the rest will be handled by the default state that will be applied when the vjs-layout-tiny class is not present, making the other vjs-layout-* classes unnecessary. An example:

const player = video('player', {
  responsive: true, // Enables breakpoint updates based on the player's size
  breakpoints: {
    tiny: 200
  }
});

/* Everything >= 201px */
.video-js {
  font-size: 20px;
}

/* Everything <= 200px */
.video-js.vjs-layout-tiny {
  font-size: 5px;
}

/* If you want to hide components when the tiny layout is activated */
.vjs-layout-tiny .vjs-subs-caps-button, 
.vjs-layout-tiny .vjs-audio-button, 
.vjs-layout-tiny .vjs-fullscreen-control {
  display: none;
}

Finally, the table described in the Class section defines the default sizes of the breakpoints. However, if we set the size of tiny to 768, which is the default value for medium, then the xsmall, small, and medium classes will not be applied, only those that are greater than 768 will be. You can test this behavior by doing:

const player = video('player', {
  responsive: true,
  breakpoints: {
    tiny: 768
  }
});

player.on('playerresize', () => console.log('currentBreakpoint', player.currentBreakpoint()));

Hope this helps.

[pchr-srf]

Perfect, thank you very much, @amtins!