Setting opentok react video to use the full height of the enclosing div

Question

I'm using https://www.npmjs.com/package/opentok-react in my application and creating a publisher and subscriber in a div. This is the css:

#videos {
    position: fixed;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: -100;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    //min-height: 720px;
    //margin-left: auto;
    //margin-right: auto;
}
#subscriber {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
#publisher {
    position: absolute;
    width: 360px;
    height: 240px;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    border: 3px solid white;
    border-radius: 3px;
}

The problem is when I pass the subscriber component the props width 100% and height 100% it doesn't obey, it doesn't do what I expect. I expect it to use the full height and widdth of the div with the #subscriber id selector. However it doesn't. Instead if I pass the props as a px value it works. How can I just make the subscriber video componet fit to the size of the container div based on a percentage?

Manik Manik · Accepted Answer · 2019-03-04T19:37:25

TokBox Developer Evangelist here.

When creating publishers and subscribers, the Opentok-React library assigns the OTPublisherContainer and OTSubscriberContainer classes to the DOM elements so please use them to style to publisher and subscribers, respectively. You can see this in the library code here:

I've also gone ahead and filed an issue on the repo to improve documentation on styling.

Setting opentok react video to use the full height of the enclosing div

1 Answers