Layout Container – Auto resizing video elements in a container

When 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.

After including the library in your project, you can simply call ResizeLayoutContainer() whenever you need to resize the elements within the container. ResizeLayoutContainer takes in an object parameter with the following properties: selector for container and selector for the elements you would like to resize.

The element property defaults to work with OpenTok video streams, so the only important property you need to pass into the function is the container selector. Here are some sample codes:

function streamCreatedHandler(e){
  subscribeToStreams(event.streams);
  ResizeLayoutContainer( {container: "#streams_container"} );
}
function streamDestroyedHandler(e){
  ResizeLayoutContainer( {container: "#streams_container"} );
}