videojs-size-toggle
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

  • 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

vjs-size-toggle

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.

Package Sidebar

Install

npm i videojs-size-toggle

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

67.6 kB

Total Files

16

Last publish

Collaborators

  • blood72