npmpackage.info

react-youtube

react.js powered YouTube player component

10.1.0

1,864

MIT

TypeScript

5.88 kB

59,502,457 3.3

Installations

npm install react-youtube

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 14.x

Node Version

16.14.2

NPM Version

8.19.1 Score

90.3

Supply Chain

100

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

7

Total

174

Closed

26

Merged

141

Issues

Open

76

Total

238

Closed

162

Releases

v10.1.0

Published on 22 Nov 2022

v10.1.0-canary.1

Published on 22 Nov 2022

v10.0.0-canary.2

Published on 22 Nov 2022

v10.0.0

Published on 12 Sept 2022

v10.0.0-canary.1

Published on 12 Sept 2022

v9.0.3

Published on 04 Jul 2022

View all 60 releases

Contributors

Unable to fetch Contributors

View all 45 contributors

Languages

TypeScript

JavaScript

HTML

CSS

Shell

TypeScript (95.68%)

JavaScript (2.52%)

HTML (0.72%)

CSS (0.66%)

Shell (0.41%)

Developer

tjallingt

Download Statistics

Total Downloads

59,502,457

Last Day

21,930

Last Week

253,583

Last Month

1,557,260

Last Year

16,704,002

GitHub Statistics

1,864 Stars

413 Commits

222 Forks

20 Watching

7 Branches

45 Contributors

Bundle Size

17.46 kB

Minified

5.88 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

10.1.0

Package Id

react-youtube@10.1.0

Unpacked Size

72.48 kB

Size

10.63 kB

File Count

NPM Version

8.19.1

Node Version

16.14.2

Total Downloads

Cumulative downloads

Total Downloads

59,502,457

Last day

-71.2%

21,930

Compared to previous day

Last week

-33.7%

253,583

Compared to previous week

Last month

-1%

1,557,260

Compared to previous month

Last year

13.9%

16,704,002

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-youtube

Simple React component acting as a thin layer over the YouTube IFrame Player API

Features

Installation

NPM

1npm install react-youtube

Yarn

1yarn add react-youtube

PNPM

1pnpm add react-youtube

Usage

1<YouTube
2  videoId={string}                  // defaults -> ''
3  id={string}                       // defaults -> ''
4  className={string}                // defaults -> ''
5  iframeClassName={string}          // defaults -> ''
6  style={object}                    // defaults -> {}
7  title={string}                    // defaults -> ''
8  loading={string}                  // defaults -> undefined
9  opts={obj}                        // defaults -> {}
10  onReady={func}                    // defaults -> noop
11  onPlay={func}                     // defaults -> noop
12  onPause={func}                    // defaults -> noop
13  onEnd={func}                      // defaults -> noop
14  onError={func}                    // defaults -> noop
15  onStateChange={func}              // defaults -> noop
16  onPlaybackRateChange={func}       // defaults -> noop
17  onPlaybackQualityChange={func}    // defaults -> noop
18/>

For convenience it is also possible to access the PlayerState constants through react-youtube: YouTube.PlayerState contains the values that are used by the YouTube IFrame Player API.

Example

1// js
2import React from 'react';
3import YouTube from 'react-youtube';
4
5class Example extends React.Component {
6  render() {
7    const opts = {
8      height: '390',
9      width: '640',
10      playerVars: {
11        // https://developers.google.com/youtube/player_parameters
12        autoplay: 1,
13      },
14    };
15
16    return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={this._onReady} />;
17  }
18
19  _onReady(event) {
20    // access to player in all event handlers via event.target
21    event.target.pauseVideo();
22  }
23}

1// ts
2import React from 'react';
3import YouTube, { YouTubeProps } from 'react-youtube';
4
5function Example() {
6  const onPlayerReady: YouTubeProps['onReady'] = (event) => {
7    // access to player in all event handlers via event.target
8    event.target.pauseVideo();
9  }
10
11  const opts: YouTubeProps['opts'] = {
12    height: '390',
13    width: '640',
14    playerVars: {
15      // https://developers.google.com/youtube/player_parameters
16      autoplay: 1,
17    },
18  };
19
20  return <YouTube videoId="2g811Eo7K8U" opts={opts} onReady={onPlayerReady} />;
21}

Controlling the player

You can access & control the player in a way similar to the official api:

The ~~API~~ component will pass an event object as the sole argument to each of ~~those functions~~ the event handler props. The event object has the following properties:

The event's target identifies the video player that corresponds to the event.

The event's data specifies a value relevant to the event. Note that the onReady event does not specify a data property.

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

9

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commitlint.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/commitlint.yml/canary?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/commitlint.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/commitlint.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/deploy.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/deploy.yml/canary?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/deploy.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/release.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/release.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/tests.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/tests.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/tests.yml/canary?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/tjallingt/react-youtube/tests.yml/canary?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.3

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-youtube

react-player

2.16.0

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

react-native-youtube-iframe

2.3.0

A simple wrapper around the youtube iframe js API for react native

react-lite-youtube-embed

2.4.0

A private by default, faster and cleaner YouTube embed component for React applications

@plasmicpkgs/react-youtube

7.13.212

Plasmic registration call for react-youtube

react-youtube

Installations

Developer Guide

Yes

CommonJS

>= 14.x

16.14.2

8.19.1

Score

Pull Requests

7

174

26

141

Issues

76

238

162

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

17.46 kB

5.88 kB

Maintainers

Package Meta Information

Total Downloads

59,502,457

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-youtube

Features

Installation

NPM

Yarn

PNPM

Usage

Example

Controlling the player

License

10

10

10

9

0

0

0

0

0

0

0

0

0

3.3

/10

Other packages similar to react-youtube