Не могу вписать реагирующий игрок в div

Question

Я использую реагирующий плеер из npm и хочу, чтобы он помещался в div, центрированный по центру экрана, и, конечно, был отзывчивым. Что бы я ни пытался, плеер полностью распространяется на экране и исчезает при переключении в режим мобильного просмотра. Кто-нибудь может мне помочь, пожалуйста?

Вот так выглядит родительский компонент:

const Film = () => {
return (
    <div className="film__container">
        <div className="film__box">
            <Reactplayer />
        </div>
    </div>
 )
}

Это компонент с плеером:

const Reactplayer = () => {
return (
    <div className='player-wrapper'>
        <ReactPlayer
        className='react-player'
        url={video}
        width='100%'
        height='100%'
        controls={true}
        />
    </div>
 )
}

и css (sass):

.film__container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.film__box {
    height: 500px;
    width: 100%;
    max-width: 800px;
}

.player-wrapper {
   position: relative;
   padding-top: 56.25% 
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Второй компонент и классы, которые к нему относятся, точно такие же, как и в реагирующем игроке npm документы.

Вот как это выглядит в gh- страницы: pietrzi.github.io / strona-piotrb / # / film

Answer 1

ваш .react-player содержит элемент video, стиль которого вызывает ваши проблемы. Стиль помещает видео, например, right: -400px

Добавьте это CSS к своему коду (сбросьте стиль видео):

.react-player video {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
}