Reactjs 当涉及平板电脑大小时，我想更改视频播放器的宽度

我想在平板电脑大小方面更改视频播放器的宽度。 我像下面那样试过，但没用。救命啊

以下代码用于视频组件：

Video.js

以上代码是视频组件的CSS，当屏幕进入平板电脑大小时，该组件需要更小。

<ReactPlayer url='https://www.youtube.com/watch?v=uFREKvAKP_0' autoPlay muted className="react__player" />


@media ( min-width: 769px ) and ( max-width: 1023px ) {
  .react__player{
     max-width: 50%;
     max-height: 250px; 
     margin-right: 20px;
     
  }
}

@介质（最小宽度：769px）和（最大宽度：1023px）{
.对玩家做出反应{
最大宽度：50%；
最大高度：250px；
右边距：20px；
}
}

css选择器在哪里？浏览器将不知道要将“最大宽度”应用到哪个图元。看一看，你会犯错误的

@media (min-width: 769px) and (max-width:1023px)
{
max-width: 50%;
}

<ReactPlayer url='https://www.youtube.com/watch?v=uFREKvAKP_0' autoPlay muted className="react__player" />


@media ( min-width: 769px ) and ( max-width: 1023px ) {
  .react__player{
     max-width: 50%;
     max-height: 250px; 
     margin-right: 20px;
     
  }
}