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:

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

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

  • http://houstonlandservices.com/ Oscar Derek Patterson

    Its a
    beautiful blog about land survey. The information you shared through your
    post is functional. I admire your work. Wish you all the luck for all your
    blogging efforts.

  • Lindsay Leeds

    I have been wanting this!!! You rock! Thanks for releasing it.

  • Lindsay Leeds

    If you could show a whole sample application where this is used – that would be helpful.

  • Randall Carroll

    I can’t get this to work to save my life. I know it should be really simple but I need a more fleshed out example to work off of!

    • http://aoberoi.me Ankur Oberoi

      Hey Randall, duely noted!

      We’ve made use of this library in opentokrtc.com, which is completely open source. Specifically, its used in CoffeeScript here: https://github.com/opentok/OpenTokRTC/blob/master/public/js/coffee/room.coffee. The generated JavaScript for it is just one directory up.

      In the future we will be making a more robust layoutContainer library which will be thoroughly documented. In the meantime, let us know if you have any specific questions and stay tuned!

      • tester

        not working either..

    • http://songz.me/ Song Zheng

      Hey Randall, sorry you cannot get this working. This layout container is deprecated. The new layout container lives here: https://github.com/aullman/opentok-layout-js

      As of today, the new layout container is working. To see it in action, check out http://opentokrtc.com

  • drewpal

    Any chance at a sample app using the library? That would be really helpful.

    • http://songz.me/ Song Zheng

      Hey @drewpal:disqus, you can see a sample app using the (new) layout container at http://opentokrtc.com.

      This version is deprecated, you can find the newest layout container here: https://github.com/aullman/opentok-layout-js

      • Alan

        Hey @SongZheng:disqus, in the handler for stream destruction, calling the layout function seems to have no effect. So after someone disconnects, one has to manually re-size the window to trigger a layout update. Any ideas? (note, you can see a similar problem here (http://aullman.github.io/opentok-layout-js/) if you add two streams then remove one). I’m in the latest chrome.

        • Alan

          false alarm. Looks like the layout method was getting called too rapidly and needed some set/clear timeout throttling

          • http://songz.me/ Song Zheng

            Glad to hear that you figured it out! :)

  • tester

    this does not work at all, what is the excitement about?