Objective

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.

Applies To

• Video API
• OpenTok.js

Options

1. Set position and dimensions of a video programmatically. Please find some sample code here: https://tokbox.com/developer/guides/customize-ui/js/. 
2. 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.
3. 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. 

Additional Information

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/