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.

    Install

    npm i videojs-size-toggle

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    67.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • blood72