npmpackage.info

Gathering detailed insights and metrics for youtube-player

Other packages similar to youtube-player

react-player

3.2.0

A React component for playing a variety of URLs, including file paths, Mux, YouTube, Vimeo, and Wistia

@angular/youtube-player

20.1.0

Angular YouTube Player

@types/youtube-player

5.5.11

TypeScript definitions for youtube-player

react-youtube

10.1.0

React.js powered YouTube player component

Gathering detailed insights and metrics for youtube-player

youtube-player - 5.6.0 | npmpackage.info

youtube-player

YouTube iframe API abstraction.

5.6.0

382

NOASSERTION

JavaScript

32.07 kB

3.1

Installations

npm install youtube-player

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

18.14.0

NPM Version

8.19.3 Score

98.6

Supply Chain

99.5

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

51

Closed

16

Merged

32

Issues

Open

21

Total

58

Closed

37

Releases

v5.6.0

Updated on Feb 13, 2023

v5.5.2

Updated on Jan 01, 2019

v5.5.1

Updated on Sep 25, 2018

v5.5.0

Updated on Feb 20, 2018

v5.4.0

Updated on Jun 01, 2017

v5.3.1

Updated on May 29, 2017

View All 18 releases

Languages

JavaScript

JavaScript (100%)

Developer

gajus

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

NOASSERTION License

382 Stars

109 Commits

80 Forks

12 Watchers

11 Branches

14 Contributors

Updated on Jul 09, 2025

Maintainers

View All 14 Contributors

Package Meta Information

Latest Version

5.6.0

Package Id

youtube-player@5.6.0

Unpacked Size

32.07 kB

Size

7.82 kB

File Count

NPM Version

8.19.3

Node Version

18.14.0

Published on

Feb 13, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

YouTube Player

Usage
- Events
Polyfills
Examples
Debugging
Download
Running the Examples

youtube-player is an abstraction of YouTube IFrame Player API (YIPA).

The downsides of using YouTube IFrame Player API are:

Requires to define callbacks in the global scope (window).
Requires to track the state of a player (e.g. you must ensure that video player is "ready" before you can use the API).

youtube-player:

Registers listeners required to establish when YIPA has been loaded.
Does not overwrite global YIPA callback functions.
Queues player API calls until when video player is "ready".

Usage

1/**
2 * @typedef options
3 * @see https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
4 * @param {Number} width
5 * @param {Number} height
6 * @param {String} videoId
7 * @param {Object} playerVars
8 * @param {Object} events
9 */
10
11/**
12 * @typedef YT.Player
13 * @see https://developers.google.com/youtube/iframe_api_reference
14 * */
15
16/**
17 * A factory function used to produce an instance of YT.Player and queue function calls and proxy events of the resulting object.
18 *
19 * @param {YT.Player|HTMLElement|String} elementId Either An existing YT.Player instance,
20 * the DOM element or the id of the HTML element where the API will insert an <iframe>.
21 * @param {YouTubePlayer~options} options See `options` (Ignored when using an existing YT.Player instance).
22 * @param {boolean} strictState A flag designating whether or not to wait for
23 * an acceptable state when calling supported functions. Default: `false`.
24 * See `FunctionStateMap.js` for supported functions and acceptable states.
25 * @returns {Object}
26 */
27import YouTubePlayer from 'youtube-player';

youtube-player is a factory function.

The resulting object exposes all functions of an instance of YT.Player. The difference is that the function body is wrapped in a promise. This promise is resolved only when the player has finished loading and is ready to begin receiving API calls (onReady). Therefore, all function calls are queued and replayed only when player is ready.

This encapsulation does not affect the API other than making every function return a promise.

1let player;
2
3player = YouTubePlayer('video-player');
4
5// 'loadVideoById' is queued until the player is ready to receive API calls.
6player.loadVideoById('M7lc1UVf-VE');
7
8// 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
9player.playVideo();
10
11// 'stopVideo' is queued after 'playVideo'.
12player
13    .stopVideo()
14    .then(() => {
15        // Every function returns a promise that is resolved after the target function has been executed.
16    });

Events

player.on event emitter is used to listen to all YouTube IFrame Player API events, e.g.

1player.on('stateChange', (event) => {
2    // event.data
3});
4

player.off removes a previously added event listener, e.g.

1var listener = player.on(/* ... */);
2
3player.off(listener);
4

Polyfills

Note that the built version does not inline polyfills.

You need to polyfill the environment locally (e.g. using a service such as https://polyfill.io/v2/docs/).

Examples

Debugging

youtube-player is using debug module to expose debugging information.

The debug namespace is "youtube-player".

To display youtube-player logs configure localStorage.debug, e.g.

1localStorage.debug = 'youtube-player:*';
2

Download

Using NPM:

1npm install youtube-player

Running the Examples

1npm install
2npm run build
3cd ./examples
4npm install
5npm run start

This will start a HTTP server on port 8000.

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.

9

License

Determines if the project has defined a license.

3

Pinned-Dependencies

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

2

Code-Review

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

0

Token-Permissions

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

0

Maintained

Determines if the project is "actively maintained".

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

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.1

/10

Last Scanned on 2025-07-07

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 youtube-player

Other packages similar to youtube-player

youtube-player

Installations

Developer Guide

No

CommonJS

18.14.0

8.19.3

Score

Pull Requests

3

51

16

32

Issues

21

58

37

Releases

Languages

Developer

gajus

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

YouTube Player

Usage

Events

Polyfills

Examples

Debugging

Download

Running the Examples

10

10

9

3

2

0

0

0

0

0

0

0

3.1

/10