It’s a really complex situation. I have a parent div which contains video tag wrapped in another div.
Parent div can keep on changing is aspect ratio. Like it can sometime act as portrait div and sometimes as landscape div.
Now I have to find out what styling (height:100% or width: 100%} i can apply to the video tag (which will be wrapped around another div for a specific reason) so that it work as the video is contained in the parent div (do not get cropped)
(I know object-fit. property exists that can do that) but i there is a catch, If i use that than i don’t get the actual box of the video that is playing. I also get the black stripes. I want to keep a label inside the video that is playing (which is why im wrapping video tag in another div which contains that label and that label is positioned as absolute)

Now this is working and i run this on every layout change (there are multiple boxes) but it glitches and is not that good. So i was looking if anyone else has a better idea.

** Basically what i want to do is show a video inside a varying container and i want to show a label inside the video that is playing and also keeps the video from getting cropped. **

const handleCrop = (_crop, _index, _data) => {
    if (!videoContainerRef?.current) return;
    if (!stream?.getTracks()[data.streamType === 'screen' ? 0 : 1]?.getSettings()) return;
    let videoRatio = stream
      .getTracks()
      [data.streamType === 'screen' ? 0 : 1].getSettings().aspectRatio;
    videoRatio = parseFloat(videoRatio).toFixed(2);
    const { height: containerHeight, width: containerWidth } =
      videoContainerRef.current.getBoundingClientRect();
    const containerRatio = parseFloat(containerWidth / containerHeight).toFixed(2);
    if (_crop >= 0.5) {
      if (containerRatio > videoRatio) setCroppingStyle({ width: '100%' });
      else setCroppingStyle({ height: '100%' });
    } else {
      if (containerRatio >= videoRatio) {
        setCroppingStyle({ height: '100%' });
      } else setCroppingStyle({ width: '100%' });
    }
  };

<div
    id={`participant-${index}-video-container-id`}
          className={`position-absolute d-flex align-item-center justify-content-center ${
            !data?.video || data?.selfMute?.video ? 'full-height full-width' : ''
          }`}
          style={croppingStyle}
        >
          <ParticipantLabel
            index={index}
            data={data}
            label={label}
            labelStyle={labelStyle}
            layout={layout}
            participant={participant}
            ratio={ratio}
            showLabel={showLabel}
            handleSpotlight={handleSpotlight}
          />
          <video
            id={`participant-video-${index}`}
            ref={videoRef}
            className={` ${
              userId === data.id && data.streamType === 'camera' && setting?.video?.mirrored
                ? 'invert-x'
                : ''
            }`}
            style={{ ...croppingStyle, objectFit: 'cover' }}
            muted={true}
            controls={false}
            autoPlay={true}
          >
            Your browser does not support HTML video.
            <audio
              id={`participant-audio-${index}`}
              className={'invisible'}
              ref={audioRef}
              autoPlay={true}
            />
          </video>
          {noImage}
        </div>
 <div
          id={`participant-${index}-video-container-id`}
          className={`position-absolute d-flex align-item-center justify-content-center ${
            !data?.video || data?.selfMute?.video ? 'full-height full-width' : ''
          }`}
          style={croppingStyle}
        >
          <ParticipantLabel
            index={index}
            data={data}
            label={label}
            labelStyle={labelStyle}
            layout={layout}
            participant={participant}
            ratio={ratio}
            showLabel={showLabel}
            handleSpotlight={handleSpotlight}
          />
          <video
            id={`participant-video-${index}`}
            ref={videoRef}
            className={` ${
              userId === data.id && data.streamType === 'camera' && setting?.video?.mirrored
                ? 'invert-x'
                : ''
            }`}
            style={{ ...croppingStyle, objectFit: 'cover' }}
            muted={true}
            controls={false}
            autoPlay={true}
          >
            Your browser does not support HTML video.
            <audio
              id={`participant-audio-${index}`}
              className={'invisible'}
              ref={audioRef}
              autoPlay={true}
            />
          </video>
          {noImage}
        </div>