React Vimeo

React component to load video from Vimeo.

Usage

  var Vimeo = require('react-vimeo');

  React.render(
    <Vimeo videoId={ videoId } />,
    $mountNode
  );
JavaScript

To handle errors, you can pass a function to the onError prop:

  function onError(err) {
    console.error(err);
  };

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

To automatically play the video on page load:

  var Vimeo = require('react-vimeo');

  React.render(
    <Vimeo videoId={ videoId } autoplay={true} />,
    $mountNode
  );
JavaScript

Behind the Scenes

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='vimeo'>
    <div class='vimeo-loading'>
      <svg>...</svg>
    </div>
    <div class='vimeo-image'>
      <button type='button' class='vimeo-play-button'>
        <svg>...</svg>
      </button>
    </div>
    <div class='video-embed'>
      <iframe>...</iframe>
    </div>
  </div>
HTML

For more details, check out the API

GitHub

BerkeleyTrue/react-vimeo

??

— Read More

Download as zip