React-player: Apply aspect ratio from video

[wmertens]

Related to #145: It would be nice if you could tell the player to use the native video aspect ratio.

Once the video is available, it seems that the readonly props videoHeight and videoWidth should be there, and then by measuring the ReactPlayer's parent element dimensions, the <video> can be sized, or for smooth responsiveness the padding-top trick could be used to force a height if the width is a css-fixed value.

[cookpete]

Assuming you are using FilePlayer, you should be able to set width and height of the wrapper and the <video> element to auto (or anything you like) like so:

<ReactPlayer
  url='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
  playing
  width='auto'
  height='auto'
  fileConfig={{ attributes: { style: { 
    display: 'block', 
    width: 'auto', 
    height: 'auto' 
  }}}}
/>

jsFiddle of the above

This does seems a bit hacky so perhaps the width and height of the <video> should be automatically set to auto if the top level width and height props are auto. Then the fileConfig hack would be unnecessary.

[jjperezaguinaga]

@CookPete Just wanted to mention that none of these solutions are working anymore. Checked both the fiddles from here and #145 and they are not displaying the videos at all. Maybe a problem with an updated version?

[cookpete]

@jjperezaguinaga Yeah all React fiddles made from the old base fiddle (before react@16 came along) are now broken, as they've changed how the files work. The old React base jsFiddle used react-with-addons.js that now does not exist in v16.

Here's an updated fiddle (note how the fileConfig is no longer necessary since https://github.com/CookPete/react-player/commit/b59d251b1323d97d2494bc4a7fd65a12905a4ba5).

[jjperezaguinaga]

Great, looks really nice! And if I had one dollar for every jsfiddle that I've broken over the past years 🙈

[sedubois]

I tried this with [email protected] and a Vimeo URL with no success. What is the proper way to have responsive Vimeo sizing?

[cookpete]

I tried this with [email protected] and a Vimeo URL with no success. What is the proper way to have responsive Vimeo sizing?

@sedubois The width='auto' height='auto' trick will only work when playing files, as the height of a <video> element is determined by the height of the video itself, whereas the height of an iframe is determined by the height given by the parent window.

If you know the aspect ratio you want for the video, you can use a responsive wrapper as described here.

The jsFiddle example there is also broken thanks to react@16, so here is an updated one.

[sedubois]

Thanks for the quick reply! CSS is dark magic for me, but I got something working:

export default ({ url }) => (
  <div
    css={{
      display: `flex`,
      minHeight: `100vh`,
      background: `black`,
    }}
  >
    <div
      css={{
        width: `90%`,
        maxWidth: 1000,
        margin: `auto`,
      }}
    >
      <div
        css={{
          position: `relative`,
          paddingTop: `56.25%`,
        }}
      >
        <ReactPlayer
          url={url}
          width="100%"
          height="100%"
          css={{
            position: `absolute`,
            top: 0,
            left: 0,
          }}
        />
      </div>
    </div>
  </div>
)