how to change the width of react player from its default

Question

I am using react-player to play video in an app. And it comes with default width which is not responsive. I used some css but it does not work.

import ReactPlayer from 'react-player';

<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" style={{ width: '100%' }} />

please tell me a way i can change its width and height

score 2 · Accepted Answer · answered Jun 09 '20 at 03:43

2

you can do like this .

  <ReactPlayer
          className='react-player'
          url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
          width='100%'
          height='100%'
        />

answered Jun 09 '20 at 03:43

Arpit Vyas

2,118
1
7
18

@kritiz if this helps than please consider this as marked and upvote the ans . – Arpit Vyas Jun 09 '20 at 03:47
1

thank you , I also need to implement media queries in ReactPlayer, how can i make it happen – Kritish Bhattarai Jun 09 '20 at 03:54
1

i have defined className so you can create seprate css file in which you can define media query . – Arpit Vyas Jun 09 '20 at 03:56
1

https://jsfiddle.net/e6w3rtj1/ example for responsive :D hope it help @kritiz – Anh Tuan Jun 09 '20 at 03:58
@AnhTuan happy to have helped :) please consider this ans as marked . – Arpit Vyas Jun 10 '20 at 04:24

score 1 · Answer 2 · answered Jun 09 '20 at 03:43

1

https://codesandbox.io/s/vv19l17wj3?file=/src/index.js

<ReactPlayer url="https://www.youtube.com/watch?v=ysz5S6PUM-U" width= '100%'/>

try to use width props

answered Jun 09 '20 at 03:43

Anh Tuan

1,113
5
12

score 1 · Answer 3 · answered Nov 09 '20 at 19:10

1

<ReactPlayer 
     url='https://www.youtube.com/watch?v=CJj_T-GmtWM&t=1s'
     width= '150%'
/>

now if you use the height It will not work.

answered Nov 09 '20 at 19:10

Sunny Chaware

11
2

how to change the width of react player from its default

3 Answers3