Skip to main content

Fixed Width

If want to have fixed the video modal, there are two props to set up it for your video modal

Props​

width: number; // default is undefined
responsive: boolean; // default is false

Fixed Width​

Only set up fixed width without responsive. When change the widow size will not change the video modal width.

How to do if I also want it with responsive? Don't worried about it! Let's jump to next example: Responsive

Usage​

Fixed Width Example

/src/components/FixedWidth/FixedWidth.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

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

  return (
    <div>
      <h2>Fixed Width 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 FixedWidth;

Responsive​

Set up a fixed width video modal that is still responsive

Note: The Responsive feature used with fixed width only supports for the widow size smaller than fixed width setting. If the window size larger than fixed width setting, only display fixed width size

Try to change widow size to test the feature when open your modal

Usage​

Fixed Width with Responsive Example

/src/components/FixedWidth/Responsive.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

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

  return (
    <div>
      <h2>Fixed Width with Responsive Example</h2>

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

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

export default Responsive;
```