ReactPlayer Example

Starting point for creating JSFiddles with React. This uses React with Addons.

by Leonardo Trimarchi

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ReactPlayer.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Babel + JSX

class Player extends React.Component {
  render () {
    return (
    	<div className='player-wrapper'>
        <ReactPlayer
          url='https://vimeo.com/243556536'
          className='react-player'
          playing
          width='100%'
          height='100%'
        />
      </div>
    )
  }
}

ReactDOM.render(
  <Player />,
  document.getElementById('container')
);