video.js Size Toggler

Personally used video.js size toggle on/off button package.

This is an extension that controls the size of the video through the ON/OFF button. (imagined the feeling of YouTube movie theater mode)

Index

• Requirement
• Installation
• Usage
• Options
• Example
• Browser Support
• License

Requirement

• video.js >= 7.0.0

Installation

• CDN

  https://unpkg.com/videojs-size-toggle@latest/dist/videojs-size-toggle.min.js

• ESM

  import 'videojs-size-toggle';

Usage

Components are registered immediately upon import and display on screen when you add a list to the control bar. When creating a videojs instance, you can use it by typing the options together.

Add a value for sizeToggleButton like this.

const options = {
  controlBar: {
    children: [
        'playToggle',
        'volumePanel',
        'progressControl',
        'sizeToggleButton',
        'fullscreenToggle',
    ],
  },
};

options

• activeOnly: Only one of the instances you just clicked will be activated (default false).
• disableStyles: Ignore the styles option (default false).
• minClientWidth: Client length condition value with button disappearing. (default 300)
• styles: Customized style value to apply when switching sizes (default position: relative; width: 100%;).

Put the options above in sizeToggle and pass on the options.

const video = document.querySelector('video');
const options = {
  controlBar: {
    'pictureInPictureToggle': false,
    children: [
      'playToggle',
      'volumePanel',
      'progressControl',
      'sizeToggleButton',
      'fullscreenToggle',
    ],
  },
  sizeToggle: {
    styles: {
      position: 'fixed',
      padding: 'min(21.125rem, 24%) 0', // IE11 not work
    },
  },
};

videojs(video, options);

Example

For more information, see some samples in the example folder.

Browser Support

• Chrome
• Firefox
• IE11; below polyfill required
  • Object.assign
  • Object.entries
  • NodeList.prototype.forEach

License

This package is open-sourced software licensed under the MIT license.