Skip to content
React component to load video from Vimeo
JavaScript CSS HTML
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
docs [Fix] use JSONP to fetch video data
lib
src [Fix] use JSONP to fetch video data
.babelrc
.editorconfig add first initial structure
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
CONTRIBUTING.md
LICENSE.md
README.md Update example url
banner.js
index.html
package.json [Fix] use JSONP to fetch video data
webpack.config.js

README.md

React Vimeo

NPM

Usage

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

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

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

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

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

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='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>

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

For more details, check out the API

API

API

License

MIT

See the License file.

Something went wrong with that request. Please try again.