React Vimeo
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
License
MIT
See the License file.