Video Controls

This is a nice feature to use custom controls if you don't like the native video control. Or even you don't display any control in your video

Note: This feature only support video type. It's not support if you use iframe

Props

controls: 'custom' | 'default' | 'hidden'; // default is custom

Cusomt Control

Don't need to add extra props, default is custom for controls props

Custom Control Example

/src/components/Controls/Custom.jsx

import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function Custom() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Custom Control Example</h2>
      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        header="Fixed Width Video Modal"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default Custom;

Native Control

Set default value for controls props

Default Control Example

/src/components/Controls/Default.jsx

import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function Default() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Default Control Example</h2>

      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        width={800}
        controls="default"
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
      />
    </div>
  );
}

export default Default;

Hidden Control

We can also hide the control if we don't want to show it.

Set hidden value for controls props

Hidden Control Example

/src/components/Controls/Hidden.jsx

import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function Hidden() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Hidden Control Example</h2>

      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        width={800}
        controls="hidden"
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
      />
    </div>
  );
}

export default Hidden;