aullman/opentok-layout-js

Layout Doesn't Work

Closed this issue · 1 comments

siaw23-retired commented

Hi @aullman. I've played extensively to try to get opentok-layout-js to work like the GIF in the README but have had no luck at all. I'd be happy if you could point out what I could be doing wrong.

First of all, I see this note in the README

This library adds an ot-layout className to elements once they have been layed out.

Now, I don't see any ot-layout class on my elements so this makes me think there's something wrong right off the bat. I can verify I have added the library.

So far my HTML looks something like this:

<div id="layoutContainer">
  <div id="publisherContainer" style="position: absolute; left: 731px; top: 0px; height: 0px;">
    <video autoplay="" id="local-video-undefined"></video>
    <video autoplay="" id=""></video>
  </div>
</div>

And the animation doesn't work. If I move the video element with ID "local-video-undefined" out of the "publisherContainer" div, the animation works but the layout is broken and doesn't fill the screen like in the GIF on the README.

What could I have messed up? Any pointers please?

PS: I'm not using OpenTok. My guess is it doesn't matter as long as I have video elements in a container.

aullman commented

That's right, it shouldn't matter if you're using OpenTok or not.

Are you calling the layout method? You need to call layout every time you want it to update, the layout library does not automatically detect when things change.
https://github.com/aullman/opentok-layout-js#usage

I'm going to close this but please reopen if you're still having issues.