ReactPlayer Example

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

by mrcoles

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;
}

.buttons {
  display: flex;
  align-items: center;
}

.buttons > * {
  margin-right: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Babel + JSX

class Player extends React.Component {
	state = {
  	playing: false
  }
  render () {
  	const { playing } = this.state
    return (
    	<div>
        <h3>react-player: playing = false or true test</h3>
        <p>
         Use the button below to toggle the playing prop to true or false.
        </p>
        <p>
          <span>Current state of playing = {String(playing)}</span>
        </p>
        <p>
          <button onClick={() => this.setState({ playing: true})}>
            Set playing = true
          </button>
          <br /><br />
          <button onClick={() => this.setState({ playing: false})}>
            Set playing = false
          </button>
          <br /><br />
          <button onClick={() => this.setState({ playing: undefined})}>
            Set playing = undefined
          </button>
        </p>
        <div className='player-wrapper'>
          <ReactPlayer
            url='https://www.youtube.com/watch?v=qWVc-xVZxho'
            className='react-player'
            playing={playing}
            controls
            width='100%'
            height='100%'
          />
        </div>
        <br /><br />
      </div>
    )
  }
}

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