Web SDK Client View Other Page screen does not scroll and the mobile does not work

[sd30414 (장형철)]

I am implementing react app referring to GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in a React App.

import ZoomMtg from ‘@zoomus/websdk’; It was confirmed that the mobile web does not apply the moment you do it.

const zoomMeetingSDK = document.getElementById(‘zmmtg-root’)

// To hide
zoomMeetingSDK.style.display = ‘none’;

The above code doesn’t work either.

For my project, I want to use the Client View only on a specific page of the website, but on all pages.

Because this is applied, the mobile web size does not fit.

Also, other pages do not scroll even on the web (Chrome).

How do I solve it?

[j.schoenemeyer (Jürgen)]

// To hide
zoomMeetingSDK.style.display = ‘none’;

append “trace(zoomMeetingSDK )” → result?

I would use css classes (-> addClass/removeClass) and append a custom class file at the end of the html - they conflict less with original zoom javascript programming

use the DOM debugger of the browser to test/append css rules

For my project, I want to use the Client View only on a specific page of the website, but on all pages.

use iFrames - but they are official NOT supported, because the ‘Cross-Origin Isolation’ is a bit harder to do

https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/

[sd30414 (장형철)]

const zoomMeetingSDK = document.getElementById(‘zmmtg-root’)
// To hide
zoomMeetingSDK.style.display = ‘none’;
zoomMeetingSDK.classList.add(‘fade-out’);

.fade-out {

}

I’m going to try the addClass you recommended.

I don’t know which attribute to put in css.

sorry… i’m beginner

“trace(zoomMeetingSDK )” result is

Summary

accessKey: “”
align: “”
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaInvalid: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 1}
attributes: NamedNodeMap {0: id, 1: style, id: id, style: style, length: 2}
autocapitalize: “”
autofocus: false
baseURI: “http://localhost:3000/”
childElementCount: 0
childNodes: NodeList
children: HTMLCollection
classList: DOMTokenList [value: ‘’]
className: “”
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: “inherit”
dataset: DOMStringMap {}
dir: “”
draggable: false
elementTiming: “”
enterKeyHint: “”
firstChild: null
firstElementChild: null
hidden: false
id: “zmmtg-root”
inert: false
innerHTML: “”
innerText: “”
inputMode: “”
isConnected: true
isContentEditable: false
lang: “”
lastChild: null
lastElementChild: null
localName: “div”
namespaceURI: “XHTML namespace”
nextElementSibling: div#aria-notify-area
nextSibling: div#aria-notify-area
nodeName: “DIV”
nodeType: 1
nodeValue: null
nonce: “”
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforematch: null
onbeforepaste: null
onbeforexrselect: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextlost: null
oncontextmenu: null
oncontextrestored: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: 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
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: 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
onsearch: 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
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkittransitionend: null
onwheel: null
outerHTML: “<div id="zmmtg-root" style="display: none;">”
outerText: “”
ownerDocument: document
parentElement: body
parentNode: body
part: DOMTokenList [value: ‘’]
prefix: null
previousElementSibling: div#root
previousSibling: text
role: null
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
slot: “”
spellcheck: true
style: CSSStyleDeclaration
0: “display”
accentColor: “”
additiveSymbols: “”
alignContent: “”
alignItems: “”
alignSelf: “”
alignmentBaseline: “”
all: “”
animation: “”
animationDelay: “”
animationDirection: “”
animationDuration: “”
animationFillMode: “”
animationIterationCount: “”
animationName: “”
animationPlayState: “”
animationTimingFunction: “”
appRegion: “”
appearance: “”
ascentOverride: “”
aspectRatio: “”
backdropFilter: “”
backfaceVisibility: “”
background: “”
backgroundAttachment: “”
backgroundBlendMode: “”
backgroundClip: “”
backgroundColor: “”
backgroundImage: “”
backgroundOrigin: “”
backgroundPosition: “”
backgroundPositionX: “”
backgroundPositionY: “”
backgroundRepeat: “”
backgroundRepeatX: “”
backgroundRepeatY: “”
backgroundSize: “”
basePalette: “”
baselineShift: “”
blockSize: “”
border: “”
borderBlock: “”
borderBlockColor: “”
borderBlockEnd: “”
borderBlockEndColor: “”
borderBlockEndStyle: “”
borderBlockEndWidth: “”
borderBlockStart: “”
borderBlockStartColor: “”
borderBlockStartStyle: “”
borderBlockStartWidth: “”
borderBlockStyle: “”
borderBlockWidth: “”
borderBottom: “”
borderBottomColor: “”
borderBottomLeftRadius: “”
borderBottomRightRadius: “”
borderBottomStyle: “”
borderBottomWidth: “”
borderCollapse: “”
borderColor: “”
borderEndEndRadius: “”
borderEndStartRadius: “”
borderImage: “”
borderImageOutset: “”
borderImageRepeat: “”
borderImageSlice: “”
borderImageSource: “”
borderImageWidth: “”
borderInline: “”
borderInlineColor: “”
borderInlineEnd: “”
borderInlineEndColor: “”
borderInlineEndStyle: “”
borderInlineEndWidth: “”
borderInlineStart: “”
borderInlineStartColor: “”
borderInlineStartStyle: “”
borderInlineStartWidth: “”
borderInlineStyle: “”
borderInlineWidth: “”
borderLeft: “”
borderLeftColor: “”
borderLeftStyle: “”
borderLeftWidth: “”
borderRadius: “”
borderRight: “”
borderRightColor: “”
borderRightStyle: “”
borderRightWidth: “”
borderSpacing: “”
borderStartEndRadius: “”
borderStartStartRadius: “”
borderStyle: “”
borderTop: “”
borderTopColor: “”
borderTopLeftRadius: “”
borderTopRightRadius: “”
borderTopStyle: “”
borderTopWidth: “”
borderWidth: “”
bottom: “”
boxShadow: “”
boxSizing: “”
breakAfter: “”
breakBefore: “”
breakInside: “”
bufferedRendering: “”
captionSide: “”
caretColor: “”
clear: “”
clip: “”
clipPath: “”
clipRule: “”
color: “”
colorInterpolation: “”
colorInterpolationFilters: “”
colorRendering: “”
colorScheme: “”
columnCount: “”
columnFill: “”
columnGap: “”
columnRule: “”
columnRuleColor: “”
columnRuleStyle: “”
columnRuleWidth: “”
columnSpan: “”
columnWidth: “”
columns: “”
contain: “”
containIntrinsicBlockSize: “”
containIntrinsicHeight: “”
containIntrinsicInlineSize: “”
containIntrinsicSize: “”
containIntrinsicWidth: “”
content: “”
contentVisibility: “”
counterIncrement: “”
counterReset: “”
counterSet: “”
cursor: “”
cx: “”
cy: “”
d: “”
descentOverride: “”
direction: “”
display: “none”
dominantBaseline: “”
emptyCells: “”
fallback: “”
fill: “”
fillOpacity: “”
fillRule: “”
filter: “”
flex: “”
flexBasis: “”
flexDirection: “”
flexFlow: “”
flexGrow: “”
flexShrink: “”
flexWrap: “”
float: “”
floodColor: “”
floodOpacity: “”
font: “”
fontDisplay: “”
fontFamily: “”
fontFeatureSettings: “”
fontKerning: “”
fontOpticalSizing: “”
fontPalette: “”
fontSize: “”
fontStretch: “”
fontStyle: “”
fontSynthesis: “”
fontSynthesisSmallCaps: “”
fontSynthesisStyle: “”
fontSynthesisWeight: “”
fontVariant: “”
fontVariantCaps: “”
fontVariantEastAsian: “”
fontVariantLigatures: “”
fontVariantNumeric: “”
fontVariationSettings: “”
fontWeight: “”
forcedColorAdjust: “”
gap: “”
grid: “”
gridArea: “”
gridAutoColumns: “”
gridAutoFlow: “”
gridAutoRows: “”
gridColumn: “”
gridColumnEnd: “”
gridColumnGap: “”
gridColumnStart: “”
gridGap: “”
gridRow: “”
gridRowEnd: “”
gridRowGap: “”
(…)
tabIndex: -1
tagName: “DIV”
textContent: “”
title: “”
translate: true
virtualKeyboardPolicy: “”

[j.schoenemeyer (Jürgen)]

“zoomMeetingSDK.classList.add(‘fade-out’);”
=> classList: DOMTokenList [value: ‘’] ???

first test it direct in die browser console

document.getElementById("zmmtg-root")
document.getElementById("zmmtg-root").classList.add("fade-out");
document.getElementById("zmmtg-root")

if that works, you have to implement it into your normal Javascript

note:

zoomMeetingSDK.style.display = ‘none’;
zoomMeetingSDK.classList.add(‘fade-out’);

does not work at the same time, because “display: none” takes effect immediately and “fade-out” then has no effect

Jürgen

[sd30414 (장형철)]

thanks you Jürgen!

I’ll keep trying!

[j.schoenemeyer (Jürgen)]

@sd30414

sorry… i’m beginner

zoom integration with react is not an ideal beginner project

if you are a beginner in react and zoom I would recommend to start with the CDN version with plain javascript - even that is very demanding for a beginner

GitHub - zoom/meetingsdk-web-sample: Zoom Meeting SDK web sample

Jürgen