Web SDK in an iFrame

I’ve seen a fair few topics about using the Web SDK via an iFrame although they’re all relatively old. Why isn’t it recommended? iFrame would be on the same domain and hosted via SSL, the only reason for the iFrame is to allow for custom styling of the page (rather than having the Zoom app take up the whole page).

Any tips or suggestions appreciated.

Hi @nicklx,

The reason iFrames are not recommended is because they have different behaviours from browser to browser, and certain functionality will not work correctly if the frame itself is not set up with the relevant allowfullscreen etc permissions. You also need to make sure that the frame contents is based on the same domain, otherwise you’ll run into CORS errors.

Also, Zoom are actively working on a way of editing the Web SDK UI, along with the Web Video SDK which is more powerful and customisable than the current implementation.

Personally, we use Zoom embedded within an iFrame in our production environment and haven’t seen any issues with functionality, however you will need zome custom CSS to get it to render correctly in the browser, since it’s designed to be used in the entire window.

If you do choose to use it in an iFrame, let me know if you have any issues as i have most likely come across them before!

Thanks,
Alex

Cheers for the information @alexmayo. Just out of interest, what styling did you have to do? My assumption is that the SDK doesn’t know it’s in an iFrame, so it fills the size of the iFrame, and I just adjust the size of the iFrame to control the size of the Zoom window? From my testing this appears to work without any issues?

Haven’t seen any issues as of yet through my testing, but stil working through the various features and browsers. We’ll be providing a link to join via the Zoom app either way, so if there’s any problems users can still access the meeting.

So once you go below a certain width and height, some of the UI gets obscured. For example, the ‘join audio’ button will disappear off the screen if it’s too small. Some simple transform CSS will allow you to shrink the UI, though.

Thank you for your input here @alexmayo! Let me know if you have any questions @nicklx.

Max

1 Like