Layout Container – Auto resizing video elements in a container

layoutcontainerWhen building OpenTok apps, there might be cases where you would like the videos inside a container to automagically resize to take up the largest resolution possible within the boundaries of their container. With layout container, an open sourced library available on github, you can do exactly that.

Want to see a live app that uses this layout container? Check out OpenTokRTC! Try typing “/focus” and “/unfocus” in the chat box to see additional functionalities of layout container.

OpenTokRTC is open sourced, so you can see how it initializes the layout:

[javascript] layout = TB.initLayoutContainer( document.getElementById( "streams_container"), {
fixedRatio: true
animate: true
bigClass: "OT_big"
bigPercentage: 0.85
bigFixedRatio: false
easing: "swing"
}).layout

[/javascript]

To resize video elements, simply call “layout()” every time the number of video streams change (during streamCreated or streamDestroyed events). The “bigClass”, “bigPercentage”, and “bigFixedRatio” is set if you would like the ability to focus on a stream and size it bigger than the others.

**Update** Update new layout container url and changed content to reflect updated layout container