无法调整 React-Player 视频大小

Question

无法调整 React-Player 视频的大小。我将宽度更改为任意数字，视频保持不变。我正在尝试针对计算机视图对其进行优化，然后添加断点以针对手机等较小屏幕调整大小。

下面是我在其中渲染 React-Player 视频的文件，我在其中应用了我希望采用的 React-Player 视频所需的高度和宽度。

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>

  )

}

在反应玩家对象上设置尺寸的正确方法是什么？

Answer 1

使用 width 和 height 属性：<ReactPlayer&nbsp;width={“300px”}&nbsp;url={`https://www.youtube.com/watch?v=${key}`} />

Answer 2

这段代码来自react-player库。这使我的视频具有响应能力它来自： https:&nbsp;//github.com/cookpete/react-playerclass ResponsivePlayer extends Component {&nbsp; render () {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className='player-wrapper'>&nbsp; &nbsp; &nbsp; &nbsp; <ReactPlayer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className='react-player'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url='https://www.youtube.com/watch?v=ysz5S6PUM-U'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width='100%'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height='100%'&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}----- CSS ------.player-wrapper {&nbsp; position: relative;&nbsp; padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */}.react-player {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;}