I can’t really share code because it is for a client and is integrated into their software. However, the SDK is integrated into a large React app. Because of dependency conflicts, I could not use the NPM version and the Zoom SDK is contained within an iFrame and imported via the Zoom CDN.
I was not able to reproduce this problem consistently until I realized that it was being caused by clicking on the TEXT inside the button element instead of the image. If you look at the code that @chrisapolzon posted above you will see that the text for “Start Video” is contained inside an anchor tag
<a>. I don’t know why this is the case as the whole thing is already inside a
<button> tag. In fact, if you look at the button for the Audio button right next to it, the text is contained within a simple
<button class="join-audio ax-outline" aria-label="join audio" type="button" style="background: rgb(66, 67, 69);">
<span class="img-layer"><span class="img-audio join-btn img-sprite"></span></span>
<span style="word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; outline: none;">Join Audio</span>
I don’t know why the two buttons would be differently rendered, but clicking on anchor tag with the text in it causes the problem every time. I think I may be able to work around this for now with some CSS like the following:
However, it would be better if Zoom would remove this anchor tag as it seems to serve no purpose.