React Video

A pretty good and effective way inspired by PrettyEmbed.js to create a video placeholder from Youtube or Vimeo using a high-res image. This is better because you save a initial <iframe> request until the user press play.

Install

Installing this component is very easy and it has just one dependency: React. So, you have a lot of options to do that:

• Using NPM the quickest way

  $ npm install --save react-video

• Using Bower

  $ bower install --save react-video

• Or if you want to download the lastest release and put in your website, it will work too!

NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

Then you're done! 😸

Usage

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

  var Video = require('react-video');

  // Video from Youtube
  React.renderComponent(
    <Video from='youtube' id={videoId} />,
    $mountNode
  );

  // Video from Vimeo
  React.renderComponent(
    <Video from='vimeo' id={videoId} />,
    $mountNode
  );

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

  /** @jsx React.DOM */

  var Video = ReactVideo;

Behind the Scene

There are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.

So, the semantic HTML structure will be something like this:

  <div class='video'>
    <div class='{from}-video'>
      <div class='video-loading'>
        <svg>...</svg>
      </div>
      <div class='video-image'>
        <button type='button' class='video-play-button'>
          <svg>...</svg>
        </button>
      </div>
      <div class='video-embed'>
        <iframe>...</iframe>
      </div>
    </div>
  </div>

This is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a real functional example that you can follow.

For more details, check out the API below.

Component API

<Video> component:

Property	Type	Default	Required	Description
from	String	none	yes	Video source: youtube or vimeo
id	String	none	yes	The video ID

Contributing

Anyone can help make this project better - check out the Contributing guide!

License

See the License file.