Responsive width

[zverbatim]

Hi,
Is it possible to make the <ReactPlayer> width responsive?
For example to inherit the width of the div or td in which is placed?
Thanks

[cookpete]

You should be able to pass 100% to the width and height props and it will fill it's container. If you want responsive width and aspect ratio, do something like this:

.wrapper {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div className='wrapper'>
  <ReactPlayer
    className='player'
    playing
    url={...}
    width='100%'
    height='100%'
  />
</div>

[cookpete]

Also see example jsFiddle.

[zverbatim]

Thanks!

[replaid]

This would be very helpful to include in the README.

[cookpete]

This would be very helpful to include in the README.

Nearly a year late but it's finally in there: https://github.com/CookPete/react-player#responsive-player 😞

[vicentel89]

This does not work for vertical videos. Is there a solution where the padding-top is not static and it is calculated from the video dimension?

[byrachel]

@vicentel89 Same issue here !

[cookpete]

It depends what type of video you are playing.

If you are playing a raw video file, just set width='100%' height='auto' and the video element will fill the container and retain aspect ratio (the same way an img does). Example: https://jsfiddle.net/f5kxarjq/

If you are playing something that uses an iframe (youtube, facebook etc), they have no knowledge of the aspect ratio of the video, so a dynamic aspect ratio is not possible.

If you know the aspect ratio of your vertical video, this trick still works – just reverse the numbers. So the padding-top line would become:

padding-top: 177.78% /* Player ratio: 100 / (720 / 1280) */`

[sfonua10]

What if I wanted to make it responsive within a flexbox container with two columns? Is that possible with the above solution?

[cookpete]

If you know the aspect ratio, the padding-top trick should work in any container.

[fono97]

everything you guys are saying is absolutely right but dont forget to add this line of code " ! important "

..wrapper {
position: relative !important;
padding-top: 56.25% / !important* Player ratio: 100 / (1280 / 720) */
}

.player {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}

[olatunde1998]

👍