We have several ways to customize the layout in the JS app as below. Please note there are no pre-defined layouts in OpenTok.js such as for composed archives and live streaming broadcasts. You need to customize it programmatically or use Video Express which has some predefined layout options.
- Video API
- Set position and dimensions of a video programmatically. Please find some sample code here: https://tokbox.com/developer/guides/customize-ui/js/.
- Copy a CSS-based predefined layout for Archive and Broadcast into your own CSS and use the class names. Please find the predefined layouts in https://tokbox.com/developer/guides/archive-broadcast-layout/#custom-layouts at the foot of the page.
- Use Vonage Video Express. There are predefined layouts: grid and active-speaker. Please find the developer's reference at https://tokbox.com/developer/video-express/reference/room.html.
Some more layout samples are available on GitHub:
- vonage-roundtable/layout.js - https://github.com/nexmo-se/vonage-roundtable/blob/master/public/lib/layout/layout.js
- Auto Layout for Vonage Video Application - https://learn.vonage.com/blog/2021/11/18/auto-layout-for-vonage-video-application/
A bit more about Vonage Video Express:
- Introducing Vonage Video Express: Accelerating Your Video Collaboration Projects - https://www.vonage.com/about-us/vonage-stories/video-express-accelerating-video-collaboration/
- Video Express Is Here and Why It Is Awesome! - https://learn.vonage.com/blog/2021/09/23/video-express-is-here-and-why-it%E2%80%99s-awesome/
- Create a Multiparty Video App With the New Vonage Video Express - https://learn.vonage.com/blog/2021/09/27/create-a-multiparty-video-app-with-the-new-video-express/