Zoom sdk web, in mobile view, the video render pops out of container. but works fine on desktop view

[Abdul]

my Vue js code

async renderVideo(event) {
this.setDynamicContainerWidth();
this.zoomStream = await this.zoomClient.getMediaStream();
const videoContainer = this.$refs.videoContainer; // Access the main video container
const userId = event.userId;
const userName = this.zoomClient.getUser(userId)?.displayName || ‘User’; // Fallback to ‘User’ if no name

  // Check if the userContainer already exists
  let userContainer = videoContainer?.querySelector(`.user-container-${userId}`);
  if (!userContainer) {
    // Create a persistent user container if it doesn't exist
    userContainer = document.createElement('div');
    userContainer.className = `user-container user-container-${userId}`;
    userContainer.style.position = 'relative';
    // userContainer.style.aspectRatio = '16/9';
    userContainer.style.width = '100%';
    // userContainer.style.height = '300px';
    userContainer.style.overflow = 'hidden';
    userContainer.style.margin = '10px';
    userContainer.style.border = '1px solid #ccc';
    userContainer.style.borderRadius = '8px';

    // Add the userContainer to the main video container
    if (videoContainer) {
      videoContainer.appendChild(userContainer);
    }
  }

  // Add a placeholder inside the userContainer if it doesn't exist
  let placeholder = userContainer.querySelector(`.placeholder-${userId}`);
  if (!placeholder) {
    placeholder = document.createElement('div');
    placeholder.className = `placeholder placeholder-${userId}`;
    placeholder.style.backgroundColor = 'black';
    placeholder.style.color = 'white';
    placeholder.style.display = 'flex';
    placeholder.style.justifyContent = 'center';
    placeholder.style.alignItems = 'center';
    placeholder.style.fontSize = '100px';
    placeholder.style.position = 'absolute';
    placeholder.style.top = '0';
    placeholder.style.left = '0';
    placeholder.style.width = '100%';
    placeholder.style.height = '100%';
    placeholder.innerText = userName.charAt(0).toUpperCase();

    // Append the placeholder to the userContainer
    userContainer.appendChild(placeholder);
  }

  if (event.action === 'Stop') {
    // Remove the video element if present
    const videoElement = userContainer.querySelector(`.video-${userId}`);
    if (videoElement) {
      videoElement.remove();
    }

    // Ensure the placeholder is visible and in the background
    if (placeholder) {
      placeholder.style.zIndex = '0';
      placeholder.style.opacity = '1'; // Make sure placeholder is visible when user stops video
    }

    // Optionally, remove the entire user container if it's no longer needed
    // userContainer.remove(); // Uncomment if you want to remove the entire user container
  } else {
    // Ensure the placeholder stays in the background
    if (placeholder) {
      placeholder.style.zIndex = '0';
      placeholder.style.opacity = '1'; // Ensure placeholder is visible while video is loading
    }

    // Check if the video element already exists
    let videoElement = userContainer.querySelector(`.video-${userId}`);
    if (!videoElement) {
      // Attach the video stream
      try {
        videoElement = await this.zoomStream.attachVideo(userId, VideoQuality.Video_360P);
      } catch (error) {
        console.error('Failed to attach video:', error);
        return;
      }

      // Ensure videoElement is valid
      if (videoElement) {
        videoElement.className = `video-${userId}`;
        videoElement.style.position = 'absolute';
        videoElement.style.top = '0';
        videoElement.style.left = '0';
        videoElement.style.bottom = '0';
        videoElement.style.right = '0';
        videoElement.style.width = '100%';
        videoElement.style.height = '100%';
        videoElement.style.zIndex = '1'; // Place video above the placeholder

        // Append the video element to the userContainer
        userContainer.appendChild(videoElement);
      } else {
        console.error('Video element is not valid');
      }
    }

    // Make sure the placeholder is still in the background when video is attached
    if (placeholder) {
      placeholder.style.zIndex = '0';
      placeholder.style.opacity = '0'; // Make the placeholder invisible once video is attached
    }
  }

  // Add a name label if not present
  let nameDiv = userContainer.querySelector('.bottom-name');
  if (!nameDiv) {
    nameDiv = document.createElement('div');
    nameDiv.className = 'bottom-name';
    nameDiv.style.position = 'absolute';
    nameDiv.style.fontSize = '18px';
    nameDiv.style.bottom = '0';
    nameDiv.style.left = '0';
    nameDiv.style.paddingLeft = '15px';
    nameDiv.style.paddingBottom = '8px';
    nameDiv.style.color = 'white';
    nameDiv.style.textShadow = '2px 2px 4px black';
    nameDiv.style.zIndex = '2'; // Place name above the video
    nameDiv.innerText = userName;

    // Append the name label to the userContainer
    userContainer.appendChild(nameDiv);
  }

  this.setDynamicUserContainerWidth();
},