Блог

Я использую https://www.npmjs.com/package/opentok-react в моем приложении и создание издателя и подписчика в div. Это 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;
}
  

Проблема в том, что когда я передаю компоненту subscriber реквизит, width 100% а height 100% он не подчиняется, он не делает того, чего я ожидаю. Я ожидаю, что он будет использовать полную высоту и ширину div с помощью селектора #subscriber id . Однако это не так. Вместо этого, если я передаю реквизит в виде значения px, это работает. Как я могу просто сделать так, чтобы подписной видеокомпонент соответствовал размеру контейнера div на основе процента?

Евангелист-разработчик TokBox здесь.

При создании publishers и subscribers библиотека Opentok-React присваивает элементам DOM классы OTPublisherContainer и OTSubscriberContainer , поэтому, пожалуйста, используйте их для оформления publisher и subscribers соответственно. Вы можете увидеть это в коде библиотеки здесь:

• Отпубликователь
• OTSubscriber

Я также пошел дальше и зарегистрировал проблему в репозитории, чтобы улучшить документацию по стилю.