npmpackage.info

Gathering detailed insights and metrics for react-youtube

Other packages similar to react-youtube

react-lite-youtube-embed

2.5.1

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

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

@plasmicpkgs/react-youtube

7.13.220

Plasmic registration call for react-youtube

Gathering detailed insights and metrics for react-youtube

react-youtube - 10.1.0 | npmpackage.info

react-youtube

react.js powered YouTube player component

10.1.0

1,877

MIT

TypeScript

5.88 kB

67,079,189 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

95.9

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

Updated on Nov 22, 2022

v10.1.0-canary.1

Updated on Nov 22, 2022

v10.0.0-canary.2

Updated on Nov 22, 2022

v10.0.0

Updated on Sep 12, 2022

v10.0.0-canary.1

Updated on Sep 12, 2022

v9.0.3

Updated on Jul 04, 2022

View All 60 releases

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

67,079,189

Last Day

23,906

Last Week

412,571

Last Month

1,706,285

Last Year

18,480,498

GitHub Statistics

MIT License

1,877 Stars

413 Commits

221 Forks

19 Watchers

7 Branches

44 Contributors

Updated on May 02, 2025

Bundle Size

17.46 kB

Minified

5.88 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 44 Contributors

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

67,079,189

Last Day

9.4%

23,906

Compared to previous day

Last Week

-1.9%

412,571

Compared to previous week

Last Month

-14.2%

1,706,285

Compared to previous month

Last Year

17.3%

18,480,498

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

Binary-Artifacts

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

10

Dangerous-Workflow

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

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

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

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 2025-04-28

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

Other packages similar to 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

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

17.46 kB

5.88 kB

Maintainers

Package Meta Information

Total Downloads

67,079,189

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