Impossible de redimensionner la vidéo React-Player

Impossible de redimensionner la vidéo React-Player. Je change la largeur en n'importe quel nombre et la vidéo reste inchangée. J'essaie de l'optimiser pour la vue de l'ordinateur, puis d'ajouter des points d'arrêt pour redimensionner les écrans plus petits comme les téléphones.

Ci-dessous se trouve le fichier dans lequel je rends la vidéo React-Player à l'intérieur d'un sur lequel j'applique la hauteur et la largeur souhaitées que je souhaite que ma vidéo React-Player adopte.

import React, { useContext, useEffect, useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Modal from '@material-ui/core/Modal'
import { MovieContext } from './MovieContext'
import ReactPlayer from 'react-player'
import { getTrailer } from '../utils/movieDB'
// potential of adding controls
// import { Slider, Direction } from 'react-player-controls'
//slider to be implemented
//https://www.npmjs.com/package/react-player-controls#playericon-
const useStyles = makeStyles((theme) => ({
 video: {
 width: 'auto',
 height: 'auto',
 top: '25%',
 right: '25%',
 position: 'fixed',
 [theme.breakpoints.down('xs')]: {},
 },
}))
const styles = {
 player: {
 width: '300px',
 },
}
export default function SimpleModal({ open }) {
 const classes = useStyles(),
 //receives movie from Home > DisplayCard > MovieContext
 { setOpenTrailer, movie, setMovie } = useContext(MovieContext),
 [trailer, setTrailer] = useState(),
 [key, setKey] = useState(),
 [modalStyle] = useState()
 useEffect(() => {
 if (movie) {
 getTrailer(movie).then((data) => {
 setKey(data.videos.results[0].key)
 setTrailer(data)
 })
 }
 }, [movie])
 const handleOpen = () => {
 setOpenTrailer(true)
 }
 const handleClose = () => {
 setOpenTrailer(false)
 setMovie(undefined)
 setTrailer(undefined)
 setKey(undefined)
 }
 const renderVideo = (
 <>
 {key && (
 <div className={classes.video}>
 <ReactPlayer style={styles.player} url={`https://www.youtube.com/watch?v=${key}`} />
 </div>
 )}
 </>
 )
 return (
 <div>
 <Modal
 open={open || false}
 onClose={handleClose}
 aria-labelledby="simple-modal-title"
 aria-describedby="simple-modal-description"
 >
 {renderVideo}
 </Modal>
 </div>
 )
}

Quelle est la bonne façon de définir les dimensions d'un objet de réaction-joueur ?

Solution du problème

Utilisation des accessoires de largeur et de hauteur en tant que tels :

<ReactPlayer
 width={"300px"}
 url={`https://www.youtube.com/watch?v=${key}`} />