{"id":13426580,"url":"https://github.com/feross/yt-player","last_synced_at":"2025-10-19T04:16:23.166Z","repository":{"id":17614636,"uuid":"82352430","full_name":"feross/yt-player","owner":"feross","description":"Simple, robust, blazing-fast YouTube Player API","archived":false,"fork":false,"pushed_at":"2023-10-24T09:34:14.000Z","size":100,"stargazers_count":683,"open_issues_count":18,"forks_count":66,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-15T03:49:16.577Z","etag":null,"topics":["api","browser","browserify","es6","iframe","javascript","player","video","youtube","youtube-api","youtube-player"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/feross.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-02-18T01:27:46.000Z","updated_at":"2025-04-14T08:20:20.000Z","dependencies_parsed_at":"2024-01-14T20:18:24.143Z","dependency_job_id":"34332b8c-45dd-4ef8-938d-9a265f2813f2","html_url":"https://github.com/feross/yt-player","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fyt-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fyt-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fyt-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fyt-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feross","download_url":"https://codeload.github.com/feross/yt-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301263,"owners_count":22047888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","browser","browserify","es6","iframe","javascript","player","video","youtube","youtube-api","youtube-player"],"created_at":"2024-07-31T00:01:38.312Z","updated_at":"2025-10-19T04:16:18.146Z","avatar_url":"https://github.com/feross.png","language":"JavaScript","readme":"# yt-player [![ci][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]\n\n[ci-image]: https://img.shields.io/github/workflow/status/feross/yt-player/ci/master\n[ci-url]: https://github.com/feross/yt-player/actions\n[npm-image]: https://img.shields.io/npm/v/yt-player.svg\n[npm-url]: https://npmjs.org/package/yt-player\n[downloads-image]: https://img.shields.io/npm/dm/yt-player.svg\n[downloads-url]: https://npmjs.org/package/yt-player\n[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standard-url]: https://standardjs.com\n\n### Simple, robust, blazing-fast YouTube Player API\n\nThis package is used on [Play.cash](https://play.cash).\n\n## Install\n\n```\nnpm install yt-player\n```\n\nIf you do not use a bundler, you can use the [standalone script](https://bundle.run/yt-player) directly in a `\u003cscript\u003e` tag.\n\n## Why this package?\n\nMost of the existing YouTube API packages on npm are incomplete or overcomplicated.\n\nNote: It is irresponsible to publish a package that requires all of\n`babel-runtime`, `lodash`, and 20KB of other nonsense to do a simple task. Using\nfancy dependencies doesn't make you a better programmer, and it's certainly not a\n\"best practice\" to ship tons of extra code to your website visitors. Less is more.\n🔥\n\n## Features\n\n  - Powered by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference)\n  - Lightweight - only 3.14kb gzipped and minified!\n  - Extremely fast time-to-first-frame\n    - YouTube IFrame API `\u003cscript\u003e` is automatically loaded on first use\n    - For even faster start time, add `\u003cscript src='https://www.youtube.com/iframe_api' async\u003e\u003c/script\u003e` to your page\n    - Automatically detects the presence of the API `\u003cscript\u003e` so API is never loaded twice\n  - API commands are automatically queued (until both the Iframe API and Player instance are ready)\n  - Differentiate between *fatal* errors and *unplayable video* errors\n  - Adds the all-important 'timeupdate' event, which the YouTube API lacks\n  - Well-commented codebase makes it easy to understand what's going on\n  - No large dependencies or unused code\n  - Note: no support for old browsers (e.g. IE11 and below)\n\n## Usage\n\n```js\nconst YTPlayer = require('yt-player')\nconst player = new YTPlayer('#player')\n\nplayer.load('GKSRyLdjsPA')\nplayer.setVolume(100)\n\nplayer.on('playing', () =\u003e {\n  console.log(player.getDuration()) // =\u003e 351.521\n})\n```\n\n## API\n\n### `player = new YTPlayer(element, [opts])`\n\nCreate a new YouTube player. The player will take the place of the HTML element\n`element`. Alternatively, `element` can be a selector string, which will be passed\nto `document.querySelector()`.\n\nExamples: `#player`, `.youtube-player`, or a DOM node.\n\nOptionally, provide an options object `opts` to customize the player.\n\n#### `opts.width` (number)\n\nThis parameter indicates the width of the player.\n\n#### `opts.height` (number)\n\nThis parameter indicates the height of the player.\n\n#### `opts.autoplay` (boolean)\n\nThis parameter indicates whether the initial video will automatically start to play\nwhen the player loads. The default value is `false`.\n\n#### `opts.captions` (string/boolean)\n\nThis parameter indicates the language of the closed captions that should be\nshown. The default behavior is based on user preference. The parameter value is\nan [ISO 639-1 two-letter language\ncode](http://www.loc.gov/standards/iso639-2/php/code_list.php) or a fully\nspecified locale. Or, set to `false` to force captions to be disabled, ignoring\nthe user preference.\n\n#### `opts.controls` (boolean)\n\nThis parameter indicates whether the video player controls are displayed. The\ndefault value is `true`.\n\n#### `opts.keyboard` (boolean)\n\nThis parameter indicates whether the player will respond to keyboard shortcuts. The\ndefault value is `true`.\n\n#### `opts.fullscreen` (boolean)\n\nThis parameter indicates whether the player will show a fullscreen button. The\ndefault value is `true`.\n\n#### `opts.annotations` (boolean)\n\nThis parameter indicates whether the player will show video annotations. The\ndefault value is `true`.\n\n#### `opts.modestBranding` (boolean)\n\nThis parameter lets you use a YouTube player that does not show a YouTube logo.\nEven when this option is enabled, a small YouTube text label will still display in\nthe upper-right corner of a paused video when the user's mouse pointer hovers over\nthe player. The default value is `false`.\n\n#### `opts.related` (boolean)\n\nThis parameter indicates whether the player should show related videos from the\nsame channel (`false`) or from any channel (`true`) when playback of the video\nends. The default value is `true`.\n\n#### `opts.timeupdateFrequency` (number)\n\nThe time between `onTimeupdate` callbacks, in milliseconds. Default is `1000`.\n\nSee:\n[`YT.Player` parameters](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)\nand\n[`playerVars` parameters](https://developers.google.com/youtube/player_parameters#Parameters)\nfor additional documentation about these parameters.\n\n#### `opts.playsInline` (boolean)\n\nThis parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Default is `true`.\n\n#### `opts.start` (number)\n\nThis parameter causes the player to begin playing the video at the given number\nof seconds from the start of the video. The parameter value is a positive integer.\nNote that the player will look for the closest keyframe to the time you specify.\nThis means that sometimes the play head may seek to just before the requested time,\nusually no more than around two seconds. Default is `0`.\n\n#### `opts.host` (string)\n\nThis parameter controls the hostname that videos are loaded from. Set to `'https://www.youtube-nocookie.com'` for enhanced privacy. The default value is `'https://youtube.com'`.\n\n### `player.load(videoId, [autoplay, [start]])`\n\nThis function loads the specified `videoId`. An example of a `videoId` is\n`'GKSRyLdjsPA'`.\n\nOptionally, specify an `autoplay` parameter to indicate whether the video should\nbegin playing immediately, or wait for a call to `player.play()`. Default is\n`false`. The optional `start` parameter accepts a float/integer. If it is specified,\nthen the video will start from the closest keyframe to the specified time.\n\nThis should be the first function called on a new `Player` instance.\n\n### `player.play()`\n\nPlays the currently loaded video.\n\n### `player.pause()`\n\nPauses the currently loaded video.\n\n### `player.stop()`\n\nStops and cancels loading of the current video. This function should be reserved\nfor rare situations when you know that the user will not be watching additional\nvideo in the player. If your intent is to pause the video, you should just call\n`pause()`. If you want to change the video that the player is playing,\nyou can call `load()` without calling `stop()` first.\n\n### `player.seek(seconds)`\n\nSeeks to a specified time in the video. If the player is paused when the function\nis called, it will remain paused. If the function is called from another state\n(playing, video cued, etc.), the player will play the video. The player will\nadvance to the closest keyframe before that time unless the player has already\ndownloaded the portion of the video to which the user is seeking.\n\n### `player.setVolume(volume)`\n\nSets the volume. Accepts an integer between `0` and `100`.\n\n### `player.getVolume()`\n\nReturns the player's current volume, an integer between `0` and `100`. Note that\n`getVolume()` will return the volume even if the player is muted.\n\n### `player.mute()`\n\nMutes the player.\n\n### `player.unMute()`\n\nUnmutes the player.\n\n### `player.isMuted()`\n\nReturns true if the player is muted, false if not.\n\n### `player.setSize(width, height)`\n\nSets the size in pixels of the `\u003ciframe\u003e` that contains the player.\n\n### `player.setPlaybackRate(rate)`\n\nThis function sets the suggested playback rate for the current video. If the\nplayback rate changes, it will only change for the video that is already being\nplayed. Calling `load()` will reset the playback rate to 1.\n\n### `player.setPlaybackQuality(suggestedQuality)`\n\nThis function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the `'playbackqualitychange'` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackQuality` function.\n\nThe `suggestedQuality` parameter value can be `'small'`, `'medium'`, `'large'`, `'hd720'`, `'hd1080'`, `'highres'` or `'default'`. We recommend that you set the parameter value to `'default'`, which instructs YouTube to select the most appropriate playback quality, which will vary for different users, videos, systems and other playback conditions.\n\nIf you call the `setPlaybackQuality` function with a `suggestedQuality` level that is not available for the video, then the quality will be set to the next lowest level that is available. In addition, setting `suggestedQuality` to a value that is not a recognized quality level is equivalent to setting `suggestedQuality` to `'default'`.\n\n### `player.getPlaybackRate()`\n\nThis function retrieves the playback rate of the currently playing video. The\ndefault playback rate is `1`, which indicates that the video is playing at normal\nspeed. Playback rates may include values like `0.25`, `0.5`, `1`, `1.5`, and `2`.\n\n### `player.getAvailablePlaybackRates()`\n\nThis function returns the set of playback rates in which the current video is\navailable. The default value is `1`, which indicates that the video is playing in\nnormal speed.\n\nThe function returns an array of numbers ordered from slowest to fastest playback\nspeed. Even if the player does not support variable playback speeds, the array\nshould always contain at least one value (`1`).\n\n### `player.getDuration()`\n\nReturns the duration in seconds of the currently playing video. Note that\n`getDuration()` will return 0 until the video's metadata is loaded, which normally\nhappens just before the video starts playing.\n\n### `player.getProgress()`\n\nReturns a number between `0` and `1` that specifies the percentage of the video\nthat the player shows as buffered.\n\n### `player.getState()`\n\nReturns the state of the player. Possible values are: `'unstarted'`, `'ended'`,\n`'playing'`, `'paused'`, `'buffering'`, or `'cued'`.\n\n### `player.getCurrentTime()`\n\nReturns the elapsed time in seconds since the video started playing.\n\n### `player.destroy()`\n\nRemoves the `\u003ciframe\u003e` containing the player and cleans up all resources.\n\n### `player.destroyed` (boolean)\n\nReturns `true` if `destroy()` has been called on the player.\n\n### `player.videoId` (string)\n\nReturns the currently loaded video ID, i.e. what was passed to `load()`.\n\n### `player.on('error', (err) =\u003e {})`\n\nThis event fires if a fatal error occurs in the player. This does not include\nvideos that fail to play, for whatever reason.\n\n### `player.on('unplayable', (videoId) =\u003e {})`\n\nThis event fires if the YouTube player cannot play the given video. This is not a\nfatal error. This event is reported separately from the `'error'` event so\nthere is an opportunity to play another video gracefully.\n\nPossible reasons for this error:\n\n- The video requested was not found. This error occurs when a video has been\n  removed (for any reason) or has been marked as private.\n\n- The owner of the requested video does not allow it to be played in embedded\n  players.\n\n- The request contains an invalid parameter value. For example, this error occurs\n  if you specify a videoId that does not have 11 characters, or if the videoId contains invalid characters, such as exclamation points or asterisks.\n\n### `player.on('timeupdate', (seconds) =\u003e {})`\n\nThis event fires when the time indicated by the `getCurrentTime()` method has been\nupdated.\n\n### `player.on('unstarted', () =\u003e {})`\n### `player.on('ended', () =\u003e {})`\n### `player.on('playing', () =\u003e {})`\n### `player.on('paused', () =\u003e {})`\n### `player.on('buffering', () =\u003e {})`\n### `player.on('cued', () =\u003e {})`\n\nThese events fire when the player enters the respective state. These event names\nare the same as the possible return values from `player.getState()`.\n\nWhen the player first loads a video, it will broadcast an `unstarted` event. When a\nvideo is cued and ready to play, the player will broadcast a `cued` event.\n\n### `player.on('playbackQualityChange', (quality) =\u003e {})`\n\nThis event fires whenever the video playback quality changes. Possible\nvalues are: 'small', 'medium', 'large', 'hd720', 'hd1080', 'highres'.\n\n### `player.on('playbackRateChange', (playbackRate) =\u003e {})`\n\nThis event fires whenever the video playback rate changes.\n\n## License\n\nMIT. Copyright (c) [Feross Aboukhadijeh](https://feross.org).\n","funding_links":[],"categories":["JavaScript","Utilities"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fyt-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeross%2Fyt-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fyt-player/lists"}