How to divide Iframe into few parts?

I’m making a video chat and I want to know if it’s possible to divide an iframe that was used in my game.

There’s a parent page (the game page) and an iframe that loads the video chat page. On this page there can be up to 12 video boxes (with the users webcam).

I want is to use only 1 iframe on my game page and not all 12 because my game is becoming so slow.

I want to create for example 12 div elements and divide the iframe. Is that possible to do that?

Here’s what I have tried: send a message to the iframe to get an response with the video element and MediaStream, but it was wrong way, it just can’t send me the MediaStream back
[the iframe code]

window.addEventListener('message', function(event) {
      if (event.source === window.parent) {
        switch (event.data.type) { 

          case 'getPartFromIframe':
            const elementID = event.data.elementID;
            const targetBoxID = event.data.targetBoxID;
            var iframePart = document.getElementById(elementID);

            if (iframePart) {
              console.log(`[getPartFromIframe]: element ${elementID} was found!`);
              const mediaStream = iframePart.srcObject;
              const message = {
                type: 'setPartFromIframe',
                videoData: mediaStream,
                targetBoxID: targetBoxID
              };
              window.parent.postMessage(message, '*');
            }
            break;
}

[the game page code]

window.addEventListener('message', function(event) {
  console.log("[js_functions]: got message");

  if (event.data.type === 'setPartFromIframe') {
  	console.log("setPartFromIframe : " + event.data.videoData);
    const videoElement = document.createElement('video');
    const targetBoxID = event.data.targetBoxID;
    const videoData = event.data.videoData;

    videoElement.srcObject = videoData; // Set the MediaStream object as the source
    videoElement.autoplay = true;
    videoElement.controls = true;

    const targetBox = document.getElementById(targetBoxID);
    targetBox.innerHTML = ''; // Clear any existing content
    targetBox.appendChild(videoElement);
  }
});

As far as my knowledge goes, an iframe cannot be divided to hold different videos. Maybe you can look into an alternative to iframes? Iframes are very expensive, performance wise.

I’m not sure, it’s specific project i’m working on.
I need to load all the webcam videos into the game.

I tried to create an NodeJS base to handle all the Video calls stuff and tried just to load that page into my game using Iframe, but seems it’s not the best way…
Here’s how my NodeJS page looks:


I need to take each of these videos and put on the game page.
What do you think the best way?
Thanks.

I’m honestly not sure what is the best way as I’ve never attempted this before. I’d recommend doing some research on some more performant ways to host video calls on a site and see what you can find. Good luck!