Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

youtube-player

YouTube iframe API abstraction.

Subscribe to updates I use youtube-player


Statistics on youtube-player

Number of watchers on Github 165
Number of open issues 13
Average time to close an issue 17 days
Main language JavaScript
Average time to merge a PR about 9 hours
Open pull requests 6+
Closed pull requests 9+
Last commit over 1 year ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 670 KB
Organization / Authorgajus
Latest Releasev5.5.0
Contributors4
Page Updated
Do you use youtube-player? Leave a review!
View open issues (13)
View youtube-player activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating youtube-player for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

YouTube Player

Travis build status NPM version Canonical Code Style Twitter Follow

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

/**
 * @typedef options
 * @see https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
 * @param {Number} width
 * @param {Number} height
 * @param {String} videoId
 * @param {Object} playerVars
 * @param {Object} events
 */

/**
 * @typedef YT.Player
 * @see https://developers.google.com/youtube/iframe_api_reference
 * */

/**
 * A factory function used to produce an instance of YT.Player and queue function calls and proxy events of the resulting object.
 *
 * @param {YT.Player|HTMLElement|String} elementId Either An existing YT.Player instance,
 * the DOM element or the id of the HTML element where the API will insert an <iframe>.
 * @param {YouTubePlayer~options} options See `options` (Ignored when using an existing YT.Player instance).
 * @param {boolean} strictState A flag designating whether or not to wait for
 * an acceptable state when calling supported functions. Default: `false`.
 * See `FunctionStateMap.js` for supported functions and acceptable states.
 * @returns {Object}
 */
import 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.

let player;

player = YouTubePlayer('video-player');

// 'loadVideoById' is queued until the player is ready to receive API calls.
player.loadVideoById('M7lc1UVf-VE');

// 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
player.playVideo();

// 'stopVideo' is queued after 'playVideo'.
player
    .stopVideo()
    .then(() => {
        // Every function returns a promise that is resolved after the target function has been executed.
    });

Events

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

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

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

var listener = player.on(/* ... */);

player.off(listener);

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.

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

Download

Using NPM:

npm install youtube-player

Running the Examples

npm install
npm run build
cd ./examples
npm install
npm run start

This will start a HTTP server on port 8000.

youtube-player open issues Ask a question     (View All Issues)
  • about 3 years Bluebird depenency is 95% of youtube-player size...
  • about 3 years Support for Non-HTTPS Sites
  • over 3 years Cannot find module 'youtube-player'
  • over 4 years Write test cases
youtube-player open pull requests (View All Pulls)
  • Added 'off' method of Sister to player API
  • Removing Bluebird and Lodash
  • Add basic API unit tests.
  • Reuse existing window.YT
  • feat: Accept protocol override parameter
  • Avoid referencing undefined document
youtube-player questions on Stackoverflow (View All Questions)
  • Android youtube player app, google play rejected for background playing
  • Youtube player issue
  • YouTube player API live content
  • Getting HTML5 YouTube player to fit in a UIWebView
  • Creating custom thumbnail image for embedded youtube player
  • Best Audio, Video, Youtube Player
  • Struggling with Youtube Player Support Fragment
  • close fullscreen of Youtube Player on back button inside fragment
  • Toolbar overlay hidden under system UI in YouTube player fullscreen
  • Playing different youtube videos using Youtube Player API
  • Unable to play 360 degrees video just like Youtube Player App
  • YouTube-Player-iOS-Helper can't use YTPlayer class
  • My app uses the old style YouTube player look and feel while sample app uses the new look and feel
  • ios Youtube player Blocked
  • Can I use chromeless player/playback stats with the new Youtube Player iframe embed style?
  • Control YouTube player from a Chrome extension
  • is there a way to hide youtube logo from youtube player embedded in iOS?
  • Removing youtube watermark from youtube player
  • YouTube Player Api Reloads Video from start on switching to full screen
  • How to force Youtube Player intent to play video in portrait mode?
  • embedded youtube player with links that onclick play another video in same embedded player
  • How to get video and playlist descriptions using youtube player in an app?
  • How to use Youtube Player with modern UI in Android using YoutubePlayerSupportFragment
  • How to pause the internal YouTube player via Xposed?
  • ActionBar overlaying YouTubePlayerSupportFragment from YouTube Player API
  • SERVICE_MISSING on intiallizing youtube player in android
  • YouTube-Player-iOS-Helper in Swift not working but no error
  • Rendering error #Youtube Player
  • Android youtube player resumed after user touching push to talk button
  • YouTube Player API android does not automatically change the video quality
youtube-player list of languages used
youtube-player latest release notes
v5.5.0 v5.5.0

5.5.0 (2018-02-20)

Features

  • trigger error when script can't be loaded (#69) (112f6340)
v5.4.0 v5.4.0

5.4.0 (2017-06-01)

Features

  • add volumeChange to eventNames (#61) (b493e5b5)
v5.3.1 v5.3.1

5.3.1 (2017-05-29)

Bug Fixes

Other projects in JavaScript