Fork me on GitHub

React Video

A pretty good and effective way to create a video placeholder from Youtube or Vimeo

Install

You need just one thing to make the component work. After download (using NPM, bower or whatever you want), put the base component style at the your page. 

      
        <link rel="stylesheet" href="/path/react-video.css" />

Usage

Using the component is simpler than installing. See an example with browserify to bundle your script: 


      /** @jsx React.DOM */
      var Video = require('react-video');

      React.render(
        <Video from='youtube' videoId={videoId} />,
        document.querySelector('#your-div')
      );

      React.render(
        <Video from='vimeo' videoId={videoId} />,
        document.querySelector('#your-div')
      );

The property videoId is optional, so you can use it or not. If you don't pass the property, the component will select your type of video based on your id. 


      React.render(
        <Video videoId={videoId} />,
        document.querySelector('#your-div')
      );

To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop onError in the component: 


        var _onError = function(err) {
          console.log(err);
        };

        React.render(
          <Video onError={_onError} videoId={videoId} />
          document.querySelector('#your-div')
        );

If you decide to use just Javascript without any module loader, you can get the global variable window.ReactVideo: 


      /** @jsx React.DOM */

      var Video = ReactVideo;