React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by brunolm

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://cdn.embed.ly/player-0.1.0.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class StremablePlayer extends React.Component {
  componentDidMount() {
    const player = new playerjs.Player(this.iframe);
    player.on('ready', () => {
      // nothing happening
      player.play();
    });
  }
  render() {
    return (
      <div style={{ width: '100%', height: '0px', position: 'relative', paddingBottom: '56.227%' }}>
        <iframe ref={(iframe) => {this.iframe = iframe}} title="video" src="https://streamable.com/s/flyqg/koviwi" 
          frameBorder="0" width="100%" height="100%" allowFullScreen style={{ width: '100%', height: '100%', position: 'absolute' }} />
      </div>
    );
  }
}

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