I'm currently utilizing https://www.npmjs.com/package/opentok-react within my application and setting up a publisher and subscriber in a specific div. This is the CSS I have implemented:
#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 issue arises when I provide the subscriber component with the props width 100% and height 100%, it does not behave as expected. Instead of conforming to the full width and height of the container div with the #subscriber id selector, it behaves differently. On the other hand, if I specify the props using a pixel value, it works properly. How can I ensure that the subscriber video component adjusts to the size of the container div based on a percentage?