Daily.co Iframe CSS grid styling

Question

Please I need some help.

How can I style this iframe in React to achieve a responsive video conference layout of 4 speakers using daily.co custom API.

Here's a ink to the documentation.

https://www.daily.co/blog/using-css-grid-to-create-custom-api-video-call-layouts

    <div id="main test-video">
      <iframe
        className="Video-Frame "
        title="video-call"
        ref={this.iframeRef}
        showFullscreenButton="true"
        allow="camera; microphone; fullscreen"
        id="call-frame"
        style={{ width: "70%" }}
        >

        <div className="participant 1">

        </div>

        <div className="participant 2">

        </div>

        <div className="participant 3">

        </div>

        <div className="participant 4">

        </div>

      </iframe>
     </div>