Apply aspect ratio from video

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.

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

[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).