Die Größe des React-Player-Videos kann nicht geändert werden

Die Größe des React-Player-Videos kann nicht geändert werden. Ich ändere die Breite auf eine beliebige Zahl und das Video bleibt unverändert. Ich versuche, es für die Computeransicht zu optimieren und dann Haltepunkte hinzuzufügen, um die Größe für kleinere Bildschirme wie Telefone zu ändern.

Unten ist die Datei, in der ich das React-Player-Video in einer Datei rendere, auf die ich die gewünschte Höhe und Breite anwende, die mein React-Player-Video annehmen soll.

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>
 )
}

Was ist der richtige Weg, um die Abmessungen eines React-Player-Objekts festzulegen?

Lösung des Problems

Verwenden der Requisiten für Breite und Höhe als solche:

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