How to Maintain the HTML5 Video Aspect Ratio according to Div Size

I am using react with typescript. In my project, I have JSON data that contains the information of the faces detected on the video. Now I am creating bounding boxes on faces in the video, but I am facing one problem is that the bounding box information is for the video resolution 3840 x 2160, but my div has height is 500px and width is 800px and I am also using object-fill property as fill. Now when I am rendering the bounding boxes on video it displays out from the div.

How to do this so that bounding boxes display an accurate position on the div.

sample JSON data look like this:

[
  { "frame": 0, "x": 332, "y": 624, "width": 291, "height": 306 },
  { "frame": 1, "x": 1724, "y": 539, "width": 241, "height": 309 },
  { "frame": 2, "x": 2943, "y": 503, "width": 266, "height": 354 }

]

and my code:

<div ref={divRef}>
        <Video videoSource={source} ref={vRef}/>
        <svg id="svg" ref={sRef}>
        {!flag &&
            boundingBoxData.filter((x: IDataFrame) => currentFrame === x.frame).map((y: IData) => {
                return <BoundingBox x={y.x} y={y.y} height={y.height} width={y.width}/>
            })
        }
        </svg>
      </div>