react-video

v1.5.3

React component to load video from Vimeo or Youtube across any device

react react-component react-video video youtube video player

0/weekUpdated 3 years agoMIT

Published by Pedro Nauck

npm install react-video

Repository Homepage npm

React Video

!Git release !Travis !license

![](http://f.cl.ly/items/440F3Y0w1l293g3e3g3N/cover.png)

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an </code> is rendered from browser, it blocks its parse because it isn't a <a href="http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">non-blocking script</a>. This isn't so good to your user, no?. With this react component, the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> just will be loaded when the user click on play.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2></p><p class="my-3">Installing this component is very easy and it has just one dependency: <a href="http://facebook.github.io/react/downloads.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React</a>. So, you have a lot of options to do that:</p><p class="my-3">- Using NPM <em>~the quickest way~</em><br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /> $ npm install --save react-video<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- Using Bower<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /> $ bower install --save react-video<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- Or if you want to <a href="https://github.com/pedronauck/react-video/archive/v1.5.3.zip" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">download the lastest release</a> and put in your website, it will work too!</p><p class="my-3"><strong>NOTICE:</strong> You need just one thing to make the component work. Put the <a href="./dist/react-video.css" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">base component style</a> at the </code><header><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag. If you don't wanna use the </code>.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> extension, you can get the </code>.styl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>.scss<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> extension at the folder </code>./lib<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">Then you're done! :smile_cat:</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">Using the component is simpler than installing. See an example with <a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">browserify</a> to bundle your script:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> var Video = require('react-video');</p><p class="my-3"> // Video from Youtube<br /> React.render(<br /> <Video from='youtube' videoId={videoId} />,<br /> $mountNode<br /> );</p><p class="my-3"> // Video from Vimeo<br /> React.render(<br /> <Video from='vimeo' videoId={videoId} />,<br /> $mountNode<br /> );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The property </code>videoId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 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.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> React.render(<br /> <Video videoId={videoId} /><br /> document.querySelector('#your-div')<br /> );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop </code>onError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the component:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> var _onError = function(err) {<br /> console.log(err);<br /> };</p><p class="my-3"> React.render(<br /> <Video onError={_onError} videoId={videoId} /><br /> document.querySelector('#your-div')<br /> );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If you decide to use just Javascript without any module loader, you can get the global variable </code>window.ReactVideo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <em>(or just </code>ReactVideo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</em>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> /<em>* @jsx React.DOM </em>/</p><p class="my-3"> var Video = ReactVideo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Behind the Scene</h2></p><p class="my-3">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.</p><p class="my-3">So, the semantic HTML structure will be something like this:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /> <div class='video'><br /> <div class='video-loading'><br /> <svg>...</svg><br /> </div><br /> <div class='video-image'><br /> <button type='button' class='video-play-button'><br /> <svg>...</svg><br /> </button><br /> </div><br /> <div class='video-embed'><br /> <iframe>...


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

Property | Type | Default | Required | Description -------- | ---- | ------- | -------- |----------- from |String | none | no | Video source: youtube or vimeo. Leave empty and the service will be detected for you by looking a the id. videoId |String| none | no | The video ID onError |Function` | yes | no | Callback function if the video can't be loaded

Contributing

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

License

See the License file.

React Video

![](http://f.cl.ly/items/440F3Y0w1l293g3e3g3N/cover.png)

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an

</code> is rendered from browser, it blocks its parse because it isn't a <a href="http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">non-blocking script</a>. This isn't so good to your user, no?. With this react component, the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> just will be loaded when the user click on play.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Install</h2></p><p class="my-3">Installing this component is very easy and it has just one dependency: <a href="http://facebook.github.io/react/downloads.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React</a>. So, you have a lot of options to do that:</p><p class="my-3">- Using NPM <em>~the quickest way~</em><br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />  $ npm install --save react-video<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- Using Bower<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />  $ bower install --save react-video<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- Or if you want to <a href="https://github.com/pedronauck/react-video/archive/v1.5.3.zip" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">download the lastest release</a> and put in your website, it will work too!</p><p class="my-3"><strong>NOTICE:</strong> You need just one thing to make the component work. Put the <a href="./dist/react-video.css" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">base component style</a> at the </code><header><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag. If you don't wanna use the </code>.css<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> extension, you can get the </code>.styl<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>.scss<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> extension at the folder </code>./lib<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">Then you're done! :smile_cat:</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage</h2></p><p class="my-3">Using the component is simpler than installing. See an example with <a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">browserify</a> to bundle your script:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />  var Video = require('react-video');</p><p class="my-3">  // Video from Youtube<br />  React.render(<br />    <Video from='youtube' videoId={videoId} />,<br />    $mountNode<br />  );</p><p class="my-3">  // Video from Vimeo<br />  React.render(<br />    <Video from='vimeo' videoId={videoId} />,<br />    $mountNode<br />  );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The property </code>videoId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> 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.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />  React.render(<br />    <Video videoId={videoId} /><br />    document.querySelector('#your-div')<br />  );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop </code>onError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the component:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />  var _onError = function(err) {<br />    console.log(err);<br />  };</p><p class="my-3">  React.render(<br />    <Video onError={_onError} videoId={videoId} /><br />    document.querySelector('#your-div')<br />  );<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If you decide to use just Javascript without any module loader, you can get the global variable </code>window.ReactVideo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <em>(or just </code>ReactVideo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</em>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />  /<em>* @jsx React.DOM </em>/</p><p class="my-3">  var Video = ReactVideo;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Behind the Scene</h2></p><p class="my-3">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.</p><p class="my-3">So, the semantic HTML structure will be something like this:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br />  <div class='video'><br />    <div class='video-loading'><br />      <svg>...</svg><br />    </div><br />    <div class='video-image'><br />      <button type='button' class='video-play-button'><br />        <svg>...</svg><br />      </button><br />    </div><br />    <div class='video-embed'><br />      <iframe>...