ReactPlayer Example

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

by SamsChoice

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={[
    {src: 'https://cf.cdn.vid.ly/7f6t2d/mp4.mp4', type: 'video/mp4'},
    {src: 'https://cf.cdn.vid.ly/7f6t2d/webm.webm', type: 'video/webm'}
  ]}
          className='react-player'
          playing={false}

          width='100%'
          height='100%'
          config={{ file: {
    attributes:{poster:"https://cf.cdn.vid.ly/7f6t2d/poster.jpg"}
  }}}
   
  
          controls={true}
        />
      </div>
    )
  }
}

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