# attachVideo not displaying stream **URL:** \ **Category:** Web\ **Tags:** video-sdk\ **Created:** [July 17, 2025, 5:11am UTC](https://devforum.zoom.us/t/attachvideo-not-displaying-stream/135331 "2025-07-17T05:11:23Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Ahmad3](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ahmad3/32/49791_2.png) [@Ahmad3](https://devforum.zoom.us/u/Ahmad3)\ **Post date:** [July 17, 2025, 5:11am UTC](https://devforum.zoom.us/t/attachvideo-not-displaying-stream/135331/1 "2025-07-17T05:11:23Z")
* * * **Description** Video not showing on my browser despite stream.attachVideo() returning the element properly. It seems to be empty though **Browser Console Error** No error message, just no video and the VideoPlayer object with mostly nulls (including video quality also being a null) ```auto renderVideo: is capturing video? true Videochat.tsx:529:25 renderVideo: is camera Taken? false Videochat.tsx:530:25 renderVideo: is capture forbidden? false Videochat.tsx:531:25 renderVideo: get camera id EygvzAsmorqiYpYMbQ7uk0bVVqnHABm1ALcOajQWhg4= Videochat.tsx:532:25 renderVideo: userId in renderVideo 16778240 and action: Start Videochat.tsx:533:11 renderVideo: in Start Videochat.tsx:536:13 renderVideo: VideoQuality.Video_360P 2 Videochat.tsx:544:13 renderVideo: userVideo: ​ _srcObject: null ​ accessKey: "" ​ accessKeyLabel: "" ​ ariaActiveDescendantElement: null ​ ariaAtomic: null ​ ariaAutoComplete: null ​ ariaBrailleLabel: null ​ ariaBrailleRoleDescription: null ​ ariaBusy: null ​ ariaChecked: null ​ ariaColCount: null ​ ariaColIndex: null ​ ariaColIndexText: null ​ ariaColSpan: null ​ ariaControlsElements: null ​ ariaCurrent: null ​ ariaDescribedByElements: null ​ ariaDescription: null ​ ariaDetailsElements: null ​ ariaDisabled: null ​ ariaErrorMessageElements: null ​ ariaExpanded: null ​ ariaFlowToElements: null ​ ariaHasPopup: null ​ ariaHidden: null ​ ariaInvalid: null ​ ariaKeyShortcuts: null ​ ariaLabel: null ​ ariaLabelledByElements: null ​ ariaLevel: null ​ ariaLive: null ​ ariaModal: null ​ ariaMultiLine: null ​ ariaMultiSelectable: null ​ ariaOrientation: null ​ ariaOwnsElements: null ​ ariaPlaceholder: null ​ ariaPosInSet: null ​ ariaPressed: null ​ ariaReadOnly: null ​ ariaRelevant: null ​ ariaRequired: null ​ ariaRoleDescription: null ​ ariaRowCount: null ​ ariaRowIndex: null ​ ariaRowIndexText: null ​ ariaRowSpan: null ​ ariaSelected: null ​ ariaSetSize: null ​ ariaSort: null ​ ariaValueMax: null ​ ariaValueMin: null ​ ariaValueNow: null ​ ariaValueText: null ​ assignedSlot: ​ attributes: NamedNodeMap(3) [node-id="16778240", style="display: block;", media-type="video"] ​ autocapitalize: "" ​ autocorrect: true ​ autofocus: false ​ baseURI: "http://localhost:3000/session/1f1b9ce8-4ca3-4636-a45c-c36cbc764fc6?username=azaan" ​ borderRadius: null ​ callback: function callback(e, t1) ​ childElementCount: 1 ​ childNodes: NodeList [ div ] ​ children: HTMLCollection { 0: div , length: 1 } ​ classList: DOMTokenList [] ​ className: "" ​ clientHeight: 0 ​ clientLeft: 0 ​ clientTop: 0 ​ clientWidth: 1199 ​ container: ​ contentEditable: "inherit" ​ currentCSSZoom: 1 ​ dataset: DOMStringMap(0) ​ dir: "" ​ draggable: false ​ enterKeyHint: "" ​ "fill-mode": ​ firstChild:
​ firstElementChild:
​ getRenderParams: BoundFunctionObject { … } ​ hidden: false ​ id: "" ​ inert: false ​ innerHTML: '
' ​ innerText: "" ​ inputMode: "" ​ isConnected: true ​ isContentEditable: false ​ lang: "" ​ lastChild:
​ lastElementChild:
​ localName: "video-player" ​ "media-type": ​ namespaceURI: "http://www.w3.org/1999/xhtml" ​ nextElementSibling: null ​ nextSibling: null ​ "node-id": ​ nodeName: "VIDEO-PLAYER" ​ nodeType: 1 ​ nodeValue: null ​ nonce: "" ​ offsetHeight: 0 ​ offsetLeft: 0 ​ offsetParent: ​ offsetTop: 0 ​ offsetWidth: 1199 ​ onabort: null ​ onanimationcancel: null ​ onanimationend: null ​ onanimationiteration: null ​ onanimationstart: null ​ onauxclick: null ​ onbeforeinput: null ​ onbeforematch: null ​ onbeforetoggle: null ​ onblur: null ​ oncancel: null ​ oncanplay: null ​ oncanplaythrough: null ​ onchange: null ​ onclick: null ​ onclose: null ​ oncontentvisibilityautostatechange: null ​ oncontextlost: null ​ oncontextmenu: null ​ oncontextrestored: null ​ oncopy: null ​ oncuechange: null ​ oncut: null ​ ondblclick: null ​ ondrag: null ​ ondragend: null ​ ondragenter: null ​ ondragexit: null ​ ondragleave: null ​ ondragover: null ​ ondragstart: null ​ ondrop: null ​ ondurationchange: null ​ onemptied: null ​ onended: null ​ onerror: null ​ onfocus: null ​ onformdata: null ​ onfullscreenchange: null ​ onfullscreenerror: null ​ ongotpointercapture: null ​ oninput: null ​ oninvalid: null ​ onkeydown: null ​ onkeypress: null ​ onkeyup: null ​ onload: null ​ onloadeddata: null ​ onloadedmetadata: null ​ onloadstart: null ​ onlostpointercapture: null ​ onmousedown: null ​ onmousemove: null ​ onmouseout: null ​ onmouseover: null ​ onmouseup: null ​ onpaste: null ​ onpause: null ​ onplay: null ​ onplaying: null ​ onpointercancel: null ​ onpointerdown: null ​ onpointerenter: null ​ onpointerleave: null ​ onpointermove: null ​ onpointerout: null ​ onpointerover: null ​ onpointerrawupdate: null ​ onpointerup: null ​ onprogress: null ​ onratechange: null ​ onreset: null ​ onresize: null ​ onscroll: null ​ onscrollend: null ​ onsecuritypolicyviolation: null ​ onseeked: null ​ onseeking: null ​ onselect: null ​ onselectionchange: null ​ onselectstart: null ​ onslotchange: null ​ onstalled: null ​ onsubmit: null ​ onsuspend: null ​ ontimeupdate: null ​ ontoggle: null ​ ontransitioncancel: null ​ ontransitionend: null ​ ontransitionrun: null ​ ontransitionstart: null ​ onvolumechange: null ​ onwaiting: null ​ onwebkitanimationend: null ​ onwebkitanimationiteration: null ​ onwebkitanimationstart: null ​ onwebkittransitionend: null ​ onwheel: null ​ outerHTML: '
' ​ outerText: "" ​ ownerDocument: HTMLDocument http://localhost:3000/session/1f1b9ce8-4ca3-4636-a45c-c36cbc764fc6?username=azaan ​ parentElement: ​ parentNode: ​ part: DOMTokenList [] ​ popover: null ​ prefix: null ​ previousElementSibling: null ​ previousSibling: null ​ "refresh-key": ​ removeStyleListener: function removeStyleListener()​ removeSubscribe: function subscribe()​ render: Object { getRenderParams: BoundFunctionObject, id: "16778240", viewId: "video-player-fa51b310-1d4c-4999-b5ec-f808092db917", … } ​ role: null ​ scrollHeight: 0 ​ scrollLeft: 0 ​ scrollLeftMax: 0 ​ scrollTop: 0 ​ scrollTopMax: 0 ​ scrollWidth: 1199 ​ shadowRoot: null ​ "share-source": ​ slot: "" ​ spellcheck: false ​ "stop-no-clean": ​ style: CSS2Properties { display → "block" } ​ tabIndex: -1 ​ tagName: "VIDEO-PLAYER" ​ textContent: "" ​ title: "" ​ translate: true ​ "video-quality": ​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : function get()​ : function set(t1)​ : Object { … } Videochat.tsx:547:13 renderVideo: past attachVideo Videochat.tsx:548:13 renderVideo: past appendChild Videochat.tsx:554:13 renderVideo: past setIsVideoMuted Videochat.tsx:556:13 Video started ``` **Which Web Video SDK version?** 2.2.5 **Video SDK Code Snippets** ```ts const mediaStream = clientRef.current.getMediaStream(); await mediaStream.startVideo() await renderVideo({ action: "Start", userId: clientRef.current.getCurrentUserInfo().userId }); const renderVideo = async ({ action, userId }: { action: "Start" | "Stop", userId?: number }) => { if (!clientRef.current) return; const mediaStream = clientRef.current.getMediaStream(); const cameraId = mediaStream.getActiveCamera() console.log("renderVideo: is capturing video? ", mediaStream.isCapturingVideo()) console.log("renderVideo: is camera Taken? ", mediaStream.isCameraTaken()) console.log("renderVideo: is capture forbidden? ", mediaStream.isCaptureForbidden()) console.log("renderVideo: get camera id", cameraId) console.log("renderVideo: userId in renderVideo", userId, "and action: ", action) try { if (action === "Start") { console.log("renderVideo: in Start") // if (!localVideoTrackRef.current) { // // Create local video track if it doesn't exist // localVideoTrackRef.current = // await zoomVideoRef.current.createLocalVideoTrack(); // } // await localVideoTrackRef.current.start(localVideoRef.current); console.log("renderVideo: VideoQuality.Video_360P", VideoQuality.Video_360P) const userVideo = await mediaStream.attachVideo(userId, VideoQuality.Video_360P); console.log("renderVideo: userVideo: ", userVideo) console.log("renderVideo: past attachVideo") videoContainerRef.current!.appendChild(userVideo as VideoPlayer) console.log("renderVideo: past appendChild") setIsVideoMuted(false); console.log("renderVideo: past setIsVideoMuted") ``` **Screenshots** **Troubleshooting Routes** Checking if stream is capturing video (true), camera taken (false), capture forbidden (false). **Device (please complete the following information):** - Device: Acer Nitro 5 - OS: Win 10 - Browser: Firefox - Browser Version [e.g. 88.0.4324.150 (Official Build) (x86\_64)] **Additional context** ---
**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\ **Post date:** [July 17, 2025, 6:58am UTC](https://devforum.zoom.us/t/attachvideo-not-displaying-stream/135331/2 "2025-07-17T06:58:12Z")
Hey @Ahmad3 Thanks for your feedback. Could you first check whether you’ve applied CSS styles to `video-player-container` and `video-player`? Please refer to the guidance in this article. > **[Video SDK - web - Core features](https://developers.zoom.us/docs/video-sdk/web/video/#start-video)** > > The Zoom Developer Platform is an open platform that allows third-party developers to build applications and integrations upon Zoom’s video-first unified communications platform. Or could you share some problematic session IDs with us for troubleshooting purposes? Thanks Vic ---
**Author:** ![Ahmad3](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ahmad3/32/49791_2.png) [@Ahmad3](https://devforum.zoom.us/u/Ahmad3)\ **Post date:** [July 18, 2025, 8:43pm UTC](https://devforum.zoom.us/t/attachvideo-not-displaying-stream/135331/3 "2025-07-18T20:43:22Z")
Hi vic, thanks for the speedy response, and sorry for the delayed response. I did apply styles, the same ones mentioned in the guide. Your response did prompt me to investigate the styles though, which showed that it was a height width issue, with them being set to 100% without the parent element having any set, so it wouldnt show. Fixed it, sorry for the dumb mistake haha ---
**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\ **Post date:** [July 18, 2026, 8:44pm UTC](https://devforum.zoom.us/t/attachvideo-not-displaying-stream/135331/4 "2026-07-18T20:44:19Z")
Closed on July 18, 2026, 8:44pm UTC This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.