A Video.js plugin which adapts the layout of your controls to the width of your video player
Switch branches/tags
Clone or download
hartman Merge pull request #9 from brion/vjs6
Update for video.js 6
Latest commit 29151e2 Jan 21, 2018

README.md

videojs-responsive-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!');
    this.play();
  }
);

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...

Contributing

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

License

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