Open Modal in fullscreen

Question

Is there a way to open a modal which will take entire screen just like in youtube video when you click on it's fullscreen it takes the entire screen view.

Right now this is what i have achieved so far

<Modal
      title={false}
      visible={visible}
      footer={false}
      centered
      width="100vw"
      onCancel={() => setVisible(false)}
    >
      <div style={{height: '100vh'}}>
        some content
      </div>
    </Modal>

and this is how it looks like

i want it to look like this

Answer 1

With pure JavaScript you can do something like

const modal = document.querySelector('#myModalsClass')
modal.requestFullscreen()

If you look up the docs for the fullscreen API you will find other useful information about how to work with this.

If you're using React you need to use a ref to access the dom api

import React, { useRef } from "react";

const MyComponent = (props) => {
  const myFullscreenComponent = useRef();
  const openContentFullscreen = () => {
    const element = myFullscreenComponent.current;
    if (element && element.requestFullscreen) {
      element.requestFullscreen();
    }
  };
  return (
    <div>
      <button onClick={openContentFullscreen}>Full Screen</button>
      <div className="modal" ref={myFullscreenComponent}>
        content I want to be fullscreen
      </div>
    </div>
  );
};