{"id":22105591,"url":"https://github.com/btmpl/react-yt","last_synced_at":"2025-07-25T02:32:10.500Z","repository":{"id":57347944,"uuid":"115450378","full_name":"BTMPL/react-yt","owner":"BTMPL","description":"A YouTube player component for React following the render props pattern","archived":false,"fork":false,"pushed_at":"2017-12-27T17:05:48.000Z","size":239,"stargazers_count":63,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-20T16:28:09.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BTMPL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-26T19:47:24.000Z","updated_at":"2022-11-23T09:54:20.000Z","dependencies_parsed_at":"2022-08-28T01:40:30.884Z","dependency_job_id":null,"html_url":"https://github.com/BTMPL/react-yt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BTMPL/react-yt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-yt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-yt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-yt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-yt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BTMPL","download_url":"https://codeload.github.com/BTMPL/react-yt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Freact-yt/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266944314,"owners_count":24010486,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-01T06:47:33.722Z","updated_at":"2025-07-25T02:32:10.221Z","avatar_url":"https://github.com/BTMPL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-yt \n=============================\n\nA full-fledged wrapper for the Youtube Player API created with the render props pattern.\n\n## Example\n\nhttps://btmpl.github.io/react-yt/\n\n## Features\n- playback of single video or supported lists (playlist, user uploads, search results),\n- full access to the Youtube Player API inside the render prop,\n- access to the player instance as an escape hatch,\n- ability to control selected features as props to the component\n\n## Installation\n\n```\n$ yarn add react-yt\n```\n\nMinimal usage example\n----\n```js\n/**\n * We are using `module` field to provide an ES module format\n * and `main` field for an CommonJS fallback\n */\nimport YouTube from \"react-yt\";\n```\n```js\n\u003cYouTube\n  videoId={'SKGzIhOSQVY'}\n  autoplay={true}\n/\u003e\n```\n\n## Accepted props\n\nThe player accepts all the official [player parameters](https://developers.google.com/youtube/player_parameters?hl=pl#listtype) as props. \n\nProp name|TypeScript type|Accepted values\n---|---|---\n`autoplay`|`YT.AutoPlay`|`0 \\| 1`\n`ccLoadPolicy`|`YT.ClosedCaptionsLoadPolicy`|`0 \\| 1`\n`color` | `YT.ProgressBarColor`|`\"white\" \\| \"red\"`\n`controls` | `YT.Controls`|`0 \\| 1`\n`disablekb` | `YT.KeyboardControls`|`0 \\| 1`\n`enableJsApi` | `YT.JsApi`|`0 \\| 1`\n`end` | `number`|`number`\n`fs` | `YT.FullscreenButton`|`0 \\| 1`\n`hl` | `string`|ISO 639-1 languag code\n`ivLoadPolicy` | `YT.IvLoadPolicy`|`0 \\| 1`\n`list` | `string`|`string`\n`listType` | `ListType`|`\"playlist\" \\| \"user_uploads\" \\| \"search\"`\n`loop` | `YT.Loop`|`0 \\| 1`\n`modestbranding` | `YT.ModestBranding`|`0 \\| 1`\n`origin` | `string`|`string`\n`playlist` | `string`|`string`\n`playsinline` | `YT.PlaysInline`|`0 \\| 1`\n`rel` | `YT.RelatedVideos`|`0 \\| 1`\n`showinfo` | `YT.ShowInfo`|`0 \\| 1`\n`start` | `number`|`number`\n`videoId` | `string`|`string`\n\nAdditionally it's possible to subscribe to the Player events by providing an `events` prop with following keys:\n\nKey name|Event signature\n---|---\n`onReady`|`YT.PlayerEventHandler\u003cYT.PlayerEvent\u003e`\n`onStateChange`|`YT.PlayerEventHandler\u003cYT.OnStateChangeEvent\u003e`\n`onPlaybackQualityChange`|`YT.PlayerEventHandler\u003cYT.OnPlaybackQualityChangeEvent\u003e`\n`onPlaybackRateChange`|`YT.PlayerEventHandler\u003cYT.OnPlaybackRateChangeEvent\u003e`\n`onError`|`YT.PlayerEventHandler\u003cYT.OnErrorEvent\u003e`\n`onApiChange`|`YT.PlayerEventHandler\u003cYT.PlayerEvent\u003e`\n\n## Using the render prop\n\nThe render prop (`render`) will be called with an object exposing:\n\nField name|Content\n---|---\niframe|The `iframe` React Element containing the player\nplayer|The `player` instance, allowing access to all internal mechanics\n\nAnd all the internal Youtube player functions:\n\nFunction name|Parameters|Return type\n---|---|---\n`loadVideoById`|`videoId: string[, startSeconds: number, suggestedQuality: string]`|`void`\n`cueVideoByUrl`|`videoId: string[, startSeconds: number, suggestedQuality: string]`|`void`\n`loadVideoByUrl`|`videoUrl: string[, startSeconds: number, suggestedQuality: string]`|`void`\n`loadPlaylist`|`playlist: string\\|Array[, index: number, startSeconds: number, suggestedQuality: string]`|`void`\n`cuePlaylist`|`playlist: string\\|Array[, index: number, startSeconds: number, suggestedQuality: string]`|`void`\n`pauseVideo`|`void`|`void`\n`playVideo`|`void`|`void`\n`mute`|`void`|`void`\n`unMute`|`void`|`void`\n`isMuted`|`void`|`boolean`\n`setVolume`|`number`|`void`\n`getVolume`|`void`|`number`\n`stopVideo`|`void`|`void`\n`clearVideo`|`void`|`void`\n`nextVideo`|`void`|`void`\n`previousVideo`|`void`|`void`\n`playVideoAt`|`number`|`void`\n`seekTo`|`number`|`void`\n`getPlaybackRate`|`void`|`number`\n`setPlaybackRate`|`number`|`void`\n`getAvailablePlaybackRates`|`void`|`Array\u003cnumber\u003e`\n`setLoop`|`boolean`|`void`\n`setShuffle`|`boolean`|`void`\n`getPlayerState`|`void`|`number`\n`getCurrentTime`|`void`|`number`\n`getPlaybackQuality`|`void`|`string`\n`setPlaybackQuality`|`string`|`void`\n`getVideoLoadedFraction`|`void`|`float`\n`getDuration`|`void`|`number`\n`getVideoUrl`|`void`|`string`\n`getVideoEmbedCode`|`void`|`string`\n`getPlaylist`|`void`|`Array\u003cstring\u003e`\n`getPlaylistIndex`|`void`|`number`\n`addEventListener`|`string`, `Function`|`void`\n`removeEventListener`|`string`, `Function`|`void`\n\n## Rendering with render props\n\n```js\n\u003cYouTube\n  videoId={'SKGzIhOSQVY'}\n  render={({\n    iframe,\n    playVideo,\n    pauseVideo,\n    getPlayerState\n  }) =\u003e (\n    \u003cdiv\u003e\n      {iframe}\n      {getPlayerState() !== 1 \u0026\u0026 \u003cbutton onClick={(event) =\u003e playVideo()}\u003ePlay video\u003c/button\u003e}\n      {getPlayerState() === 1 \u0026\u0026 \u003cbutton onClick={(event) =\u003e pauseVideo()}\u003ePause video\u003c/button\u003e}\n    \u003c/div\u003e\n  )}\n/\u003e\n```\n\n## Controlling the player from outside\n\nWhile the recommended way to control the playback is from inside the render prop function, it is also possible to control the component from outside by changing the props. Developers are able to provide the following props in order to control the component without having to remount it.\n\nProp|Result\n---|---\nvideoId|When given a non-falsy value, the selected video will play\nlist + listType |When given a non-falsy value, the selected list will play\nautoplay|Controls the playback state, `false` to pause the playback, or `true` to start / resume\n\nThe logic uses `componentWillReceiveProps` to control the playback, so passing the props in a given order will override older props. Passing new values to both props at the same time will give priority to the `videoId` prop.\n\n\n# License\n\n  MIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Freact-yt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtmpl%2Freact-yt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Freact-yt/lists"}