Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-responsive-layout with all npm packages installed. Try it out:

var videojsResponsiveLayout = require("videojs-responsive-layout")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-responsive-layout v1.1.1

A plugin which reacts to the width of your Video.js player to change the layout.


Current version Dependencies

A plugin that reacts to the width of your player to change the layout of your Video.js player.

This plugin changes the layout of the controlbar of your Video.js player, based on the width of the player. When it has calculated that not all controls will fit inside the player, it applies one of 3 different layout classes, which are provided by the default skin of Video.js.

* vjs-layout-tiny
* vjs-layout-x-small
* vjs-layout-small

Getting started

Simply install from npm, using npm install videojs-responsive-layout. Now add the dist/videojs-responsive-layout.js or dist/videojs-responsive-layout.min.js to your page and make sure it loads after the main videojs javascript.

Now configure it like:

var player = videojs( 'really-cool-video',
    controlBar: {
      volumeMenuButton: {
          inline: false
    plugins: {
      responsiveLayout: {}
  function() {
    console.log('Good to go!');;

The inline:false option is important, because the plugin cannot deal with an inline and horizontal volume control at this time.

Advanced options

Will follow soon...


I really appreciate any help in maintaining and advancing this library. Check out the contributing guide.


MIT and Apache-2.0. Copyright (c) Derk-Jan Hartman


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free