ReactPlayer Example

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

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/react-player/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 {
	state = {
  	playing: true
  }
  render () {
  	const { playing } = this.state
    return (
    	<div>
        <div className='player-wrapper'>
          <ReactPlayer
            url='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
            className='react-player'
            playing={playing}
            controls
            width='100%'
            height='100%'
          />
        </div>
        <button onClick={() => this.setState({ playing: !playing })}>
          {playing ? 'Pause' : 'Play'}  
        </button>
      </div>
    )
  }
}

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