• Stars
    star
    273
  • Rank 150,780 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

React Video

Git release Travis license

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 <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on 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

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.render(
    <Video from='youtube' videoId={videoId} />,
    $mountNode
  );

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

The property videoId 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.

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

To handle errors when something happens, like your video can't be loaded, you can pass a callback with a prop onError in the component:

  var _onError = function(err) {
    console.log(err);
  };

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

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

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 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.

More Repositories

1

react-adopt

😎 Compose render props components like a pro
TypeScript
1,681
star
2

reworm

🍫 the simplest way to manage state
TypeScript
1,464
star
3

micro-router

🚉 A tiny and functional router for Zeit's Micro
JavaScript
621
star
4

react-simpletabs

Just a simple tabs component built with React
JavaScript
188
star
5

algorithms-with-es6

Just a bunch of algorithms using Javascript with ES6
JavaScript
161
star
6

reicons

💅 Bundle your SVG into a fully customized React components
JavaScript
113
star
7

gatsby-starter-docz

📝 Gatsby starter with Docz and a blog for your documentation
JavaScript
90
star
8

frontend-styleguide

Keep your code clean, legible and beautiful!
CSS
69
star
9

spacefold

Use Pub/Sub pattern inside your React applications easily
TypeScript
61
star
10

oneoften

Tips, tricks, tutoriais and many things about "How building a Large Scale application with Javascript"
44
star
11

yarn-workspaces-example

Sample monorepo project using new Yarn feature called Workspaces
JavaScript
41
star
12

which-licenses-i-have

📝 Learn about the licenses around your package
JavaScript
29
star
13

docz-plugin-react-native

Plugin that allow you to use React Native with docz
JavaScript
21
star
14

storz

Global state machines in an easy way
TypeScript
21
star
15

shazam

⚡️ An opinionated and usefull react app management
JavaScript
17
star
16

hacker-news-es6

Hacker News feed built with ECMAScript 6 and jQuery
JavaScript
17
star
17

vitejs-boilerplate

ViteJS boilerplate with TailwindCSS, React Router v6, Typescript and more.
TypeScript
15
star
18

libundler

JavaScript
14
star
19

nextjs-boilerplate

NextJS boilerplate with some cool stack
TypeScript
12
star
20

promiseJS.br

Tradução do site http://www.promisejs.org/
CSS
11
star
21

certifyJS

NodeJS module that generate a course certificate in PDF
JavaScript
9
star
22

eleicoes2022

Estudos analítico encima dos dados do TSE sobre o resultado das Eleições 2022 no Brasil
7
star
23

notion-todo

Todo app made using the Notion API
JavaScript
6
star
24

xresource

TypeScript
6
star
25

reason-todo-example

Just a simple todo app built with ReasonML
OCaml
5
star
26

to-titlelize

NodeJS module to format string in titlelize
JavaScript
4
star
27

pedronauck.com

My website 🔥
JavaScript
3
star
28

jarvis

Central de conteúdo sobre desenvolvimento da GoNorth
2
star
29

builder-skeleton

Just a test for Stackblitz api
HTML
2
star
30

create-dataset

Experiment recreating React Context using plain Javascript
JavaScript
2
star
31

nvim

My current Neovim configuration
Lua
2
star
32

typescript-with-docz-example

Just a simple test
TypeScript
2
star
33

react-grocery-list

This is a sample Grocery List application to test ReactJS + Gulp + Browserify
JavaScript
2
star
34

xstate-fp

Just another approach to write state machines for XState
1
star
35

zmk-config

My zmk configuration
1
star
36

fusebox-preact-example

Sample application using FuseBox and Preact
JavaScript
1
star
37

docz-plugin-svgr

Use svgr as loader for svg images
TypeScript
1
star
38

teste-repo

Teste de repositório
1
star
39

datocms-blog-demo-5245

JavaScript
1
star
40

astronvim_config

Astro vim config
Lua
1
star
41

mediator

Mediator pattern applied on React
TypeScript
1
star
42

csb-xut4hw

HTML
1
star