https://github.com/tiendq/youtube-embed-video

React component to embed Youtube video on the web page.
https://github.com/tiendq/youtube-embed-video

es6 npm react youtube

Last synced: about 2 months ago
JSON representation

React component to embed Youtube video on the web page.

• Host: GitHub
• URL: https://github.com/tiendq/youtube-embed-video
• Owner: tiendq
• License: mit
• Created: 2016-11-10T08:08:51.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-11-22T11:01:56.000Z (about 5 years ago)
• Last Synced: 2024-11-06T14:18:28.378Z (about 2 months ago)
• Topics: es6, npm, react, youtube
• Language: JavaScript
• Size: 653 KB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# YoutubeEmbedVideo

React component to embed Youtube video on web page (`v1.2.1`).

[![CircleCI](https://circleci.com/gh/tiendq/youtube-embed-video.svg?style=svg)](https://circleci.com/gh/tiendq/youtube-embed-video) [![Greenkeeper badge](https://badges.greenkeeper.io/Tiendq/youtube-embed-video.svg)](https://greenkeeper.io/)

## Usage

Simply install and import component like below code:

`yarn add youtube-embed-video`

```js

import React from 'react';

import ReactDOM from 'react-dom';

import YoutubeEmbedVideo from 'youtube-embed-video';

ReactDOM.render(, document.getElementById('app'));

```

Above code will load a Youtube video from [LEGO® Red Can Break It Down](https://www.youtube.com/watch?v=RnDC9MXSqCY).

### Properties

Props are same as Youtube options for embedding a video.

#### `videoId`

Youtube video ID parameter, it's `RnDC9MXSqCY` in this Youtube [link](https://www.youtube.com/watch?v=RnDC9MXSqCY). `Required`.

#### `autoplay`

Make an embedded video play automatically. Default: `false`

#### `suggestions`

Show suggested videos when the video finishes. Default: `true`

#### `controls`

Show player controls. Default: `true`

#### `showInfo`

Show video title and player actions. Default: `true`

#### `enhancedPrivacy`

Enable privacy-enhanced mode. Default: `false`

#### `width`

Player width in px. Default: `560`

#### `height`

Player height in px. Default: `315`

#### `size`

Pre-defined video sizes same as Youtube options. `size` will override `width` and `height` values. Available size values are `small`, `medium`, `large`, and `largest`.

## Examples

1. Run `yarn start` from `examples` folder

2. Visit `http://localhost:8080`

## TO DO

- ~~Predefined video sizes~~

- Delay load video

Copyright © 2019 Tien Do ([email protected]).

MIT License.