Edge (Chromium) Not Rendering <video> Element in <video-player> — SDK 2.1.10 Works in Safari

Video SDK Web
1

We’re using Zoom Video SDK v2.1.10. The video stream renders correctly in Safari, but in Microsoft Edge (Chromium), the internal <video> element is never injected into the <video-player> Web Component — even though the outer wrapper appears and no errors are thrown.

:white_check_mark: Steps to Reproduce:
1. Listen to the peer-video-state-change event.
2. Call stream.attachVideo(payload.userId, 3) when a user starts their video.
3. Append the returned userVideo to the DOM.
4. Observe the DOM output in Safari vs Edge.

:white_check_mark: Example Code:

client.on('peer-video-state-change', (payload) => {
  if (payload.action === 'Start') {
    stream.attachVideo(payload.userId, 3).then((userVideo) => {
      console.log('User video attached', userVideo);
      const container = document.getElementById(`user-video-${payload.userId}`);
      if (container) container.appendChild(userVideo);
    });
  } else if (payload.action === 'Stop') {
    stream.detachVideo(payload.userId);
    document.getElementById(`user-video-${payload.userId}`).innerHTML = '';
  }
});

⸻

:white_check_mark: Console Output:

Edge Output:

User video attached

<video-player node-id="16783360" media-type="video" style="display: block;">
  slot
  <div style="width: 100%; height: 100%;"></div>
</video-player>

Safari Output:

User video attached

<video-player node-id="16778240" media-type="video" style="display: block;">
  <video autoplay="true" muted="true" playsinline="true" style="width: 100%; height: 100%; border-radius: inherit;"></video>
</video-player>

⸻

:white_check_mark: Browser & System Details:
• SDK Version: 2.1.10
• Edge Version: (Chromium) 124.0.x (latest at time of testing)
• Safari: Works fine
• OS: macOS Ventura (also tested on Windows)

⸻

:white_check_mark: GPU Diagnostics (edge://gpu):
• :white_check_mark: Video Decode: Hardware Accelerated
• :white_check_mark: Video Encode: Hardware Accelerated
• :warning: Direct Rendering Display Compositor: Disabled
• :warning: Raw Draw: Disabled

⸻

:white_check_mark: Additional Notes:
• No JavaScript or DOM exceptions are thrown.
• Verified in Private mode and with all extensions disabled.
• Verified container is visible and correctly appended.
• Tried fallback render layer: stream.attachVideo(userId, 1) — still fails in Edge.

⸻

:white_check_mark: Expected Behavior:

The <video> element should be present inside <video-player> as it is in Safari, so the stream is visible.

⸻

:white_check_mark: Actual Behavior:

In Edge, the <video-player> is added but remains empty — no internal <video> tag is rendered.

⸻

:white_check_mark: Request:

Please investigate if this is a known issue with the SDK rendering pipeline in Edge. Is there a workaround, or planned fix for a future SDK release?

Device (please complete the following information):

  • Device: [e.g. Macbook Pro]
  • OS: [e.g. macOS 11]
  • Browser: [e.g. Chrome]
  • Browser Version [e.g. 88.0.4324.150 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

2

Hey @mifayo

Thanks for your feedback.

in Microsoft Edge (Chromium), the internal <video> element is never injected into the <video-player> Web Component

Video-player is a web component provided by Zoom. In version 1.x of the Video SDK, we used a WASM-based approach to render video using a <canvas> element. Starting from version 2.x, we’ve gradually transitioned to a WebRTC-based solution. The video-player component is an abstraction over both rendering strategies, so developers don’t need to worry about which underlying method is being used.

As you’ve observed, some browsers show a <video> tag inside the shadow DOM while others don’t—this reflects the internal differences between the two approaches.

When using video-player, please note:

  • Its parent or ancestor element must include a video-player-container.
  • It does not have a default size, so you’ll need to explicitly set its width and height.

We recommend setting the style like this:

video-player {
  width: 'xxxpx or percentage';
  height: auto;
  aspect-ratio: 16/9;
}

Thanks
Vic

2 Likes
3

Thank you sir, Problem solved. :oncoming_fist:t2:

1 Like
4

Hi @mifayo

In my case, I want to apply object-fit: cover to the video tag to display the participant’s video. However, since I’m not getting the video tag, it’s not applying to the video-player component.

5

Hey @fahim.vds

Currently, due to internal implementation limitations, video-player does not support the object-fit property.

Thanks
Vic

6

Hi @vic.yang

Is there any option in the SDK to forcefully render a video element in the video-player, or can I use the renderVideo function to render the video on a canvas, even though it is deprecated.

7

Hi @fahim.vds

You can specify video_webrtc_mode as 1 in the JWT field. This enables video to be rendered via a <video> tag inside the video-player element.

However, please note that this WebRTC video mode is currently not supported on Firefox and mobile browsers other than Safari and Chrome. We are actively working to extend support to these browsers.

Thanks
Vic