Iframe: black shadowy screen and video broadcast

[ccyk1210]

Description
We want to appear the live zoom video chat with iframe on our own application. As Youtube does, we want to make the video chat appears and plays before they get into the video chat.

Error

1. With the iFrame, the support message covers whole feature of the screen. The message was about video
   and audio setting: it says “You need the latest version of the browser”. Any possible way not showing this or any kind of support message right after people get in? I thing the black screen is made according to the size of the iframe. Because the screen we made was too small, there was no other way but covered up the whole screen.

2. Want to make people can see the video chat before they gather. We want people only can see the actual video without listening or joining into the video chat. How is it possible?

Which App Type (OAuth / Chatbot / JWT / Webhook)?
OAuth and JWT

Which Endpoint/s?

Reference - Web - Client SDKs - Zoom Software Development Kit (Zoom SDK)

!
Screenshots (If applicable)
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

[MaxM]

Hey @ccyk1210,

Thank you for reaching out to the Zoom Developer Forum. This question looks like it pertains to the #client-web-sdk category so I’ll move it there first.

This is most likely due to the use of an iframe with the Web SDK. As the Web SDK wasn’t designed to be used with an iframe, you can definitely run into issues. I recommend reviewing our sample app to see an example of best practices when using the web SDK.

I’m also noticing that the screenshot you provided shows the window for the Zoom Meeting is very small. I’m thinking that the smaller sizing of that view is causing issues with the display. I also recommend sizing the window properly as well to see if that resolves some of the issues you’re seeing.

I hope that helps!

Thanks,
Max

[ccyk1210]

Hi

Thank you for the quick and kind response!
Yes we were thinking that sizing has made this issue.

We are developing an application that run by volunteers to teach any kind of topic from more than 50 countries mostly via zoom. Currently now, we are upgrading the system with new design or so. I wanted to make the zoom videos appears on the front that people can access to view videos only before they actually get into the each video chat room as like preview. Our developer thought using iframe could make this happen but can not reach to think of the sizing issue. Can you give any recommendations to make this possible?

[MaxM]

Hey @ccyk1210,

Thank you for the update. One thing I forgot to mention as well is that it’s possible to encounter the error you’re seeing if you are using HTTP to access the application. I would also make sure that you are using HTTPS at all times on the application.

Our developer thought using iframe could make this happen but can not reach to think of the sizing issue. Can you give any recommendations to make this possible?

I just want to clarify this point. Are you saying that you’re attempting to resize the window but aren’t able to do so? If so, I recommend reviewing our sample app for examples of best practices when implementing the Web SDK.

Let me know if that answers your question.

Thanks,
Max

[ccyk1210]

Hi! I’ve just checked! Sorry for late response.

I think the main issue is resizing. According to our design, the size has to be smaller than as a result, the black shadowy screens covers all up which is a message about the audio. I think it’s not an error but since the size got shrunken, there is no other space than covered up. Is there any possibility that we can not just showing the support message about the audio?If so, there will be all clear.

[MaxM]

Hey @ccyk1210,

Thank you for the update. While it is possible to use custom CSS in order to style the Web SDK, we strongly advise against it as fixing any issues related to customizations would be outside the scope of what we can support.

This is because custom CSS can cause adverse, breaking, changes if it is overriding the default styles. This is especially true if an update is released and changes to the SDK are not compatible with your customizations.

With that being said, I understand that you are looking to display a smaller version of the Zoom client. You may see success by changing the parent element that contains the Zoom meeting. If you’re able to use a responsive container of some sort that is able to inherently pass the parent width/height and em values to the Zoom meeting window, that may allow it to display properly at a smaller size. This is just a theory but I would test that before moving to customize the CSS if you feel that’s necessary for this use case.

I hope that helps! Let me know if you have any questions.

Thanks,
Max