{"id":26685915,"url":"https://github.com/troybetz/react-youtube","last_synced_at":"2025-03-26T11:01:11.057Z","repository":{"id":18731728,"uuid":"21943147","full_name":"tjallingt/react-youtube","owner":"tjallingt","description":"react.js powered YouTube player component","archived":false,"fork":false,"pushed_at":"2023-12-19T20:04:07.000Z","size":2468,"stargazers_count":1860,"open_issues_count":84,"forks_count":223,"subscribers_count":20,"default_branch":"canary","last_synced_at":"2024-10-29T15:05:27.676Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tjallingt.github.io/react-youtube/","language":"TypeScript","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/tjallingt.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,"dei":null}},"created_at":"2014-07-17T13:36:14.000Z","updated_at":"2024-10-28T22:30:20.000Z","dependencies_parsed_at":"2024-04-17T11:37:34.828Z","dependency_job_id":"1bd3e24f-2c79-4f0e-88bc-66ff617bcf4d","html_url":"https://github.com/tjallingt/react-youtube","commit_stats":{"total_commits":316,"total_committers":50,"mean_commits":6.32,"dds":0.6645569620253164,"last_synced_commit":"d2d147ac53ed9aa7ca2cde92bad425e9284b7298"},"previous_names":["compedit/react-youtube","troybetz/react-youtube"],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjallingt%2Freact-youtube","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjallingt%2Freact-youtube/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjallingt%2Freact-youtube/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tjallingt%2Freact-youtube/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tjallingt","download_url":"https://codeload.github.com/tjallingt/react-youtube/tar.gz/refs/heads/canary","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"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":[],"created_at":"2025-03-26T11:01:09.421Z","updated_at":"2025-03-26T11:01:11.018Z","avatar_url":"https://github.com/tjallingt.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized","\u003csummary\u003eUI Components\u003c/summary\u003e","Demos"],"sub_categories":["Audio / Video","Uncategorized"],"readme":"![Release](https://github.com/tjallingt/react-youtube/workflows/Release/badge.svg) ![Tests](https://github.com/tjallingt/react-youtube/workflows/Tests/badge.svg) ![Example](https://github.com/tjallingt/react-youtube/workflows/Example/badge.svg)\n\n# react-youtube\n\nSimple [React](http://facebook.github.io/react/) component acting as a thin layer over the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference)\n\n## Features\n\n- url playback\n- [playback event bindings](https://developers.google.com/youtube/iframe_api_reference#Events)\n- [customizable player options](https://developers.google.com/youtube/player_parameters)\n\n## Installation\n\n### NPM\n\n```bash\nnpm install react-youtube\n```\n\n### Yarn\n\n```bash\nyarn add react-youtube\n```\n\n### PNPM\n\n```bash\npnpm add react-youtube\n```\n\n### TypeScript (optional)\n\n```\nnpm install -D @types/youtube-player\n# OR\nyarn add -D @types/youtube-player\n# OR\npnpm add -D @types/youtube-player\n```\n\n## Usage\n\n```js\n\u003cYouTube\n  videoId={string}                  // defaults -\u003e ''\n  id={string}                       // defaults -\u003e ''\n  className={string}                // defaults -\u003e ''\n  iframeClassName={string}          // defaults -\u003e ''\n  style={object}                    // defaults -\u003e {}\n  title={string}                    // defaults -\u003e ''\n  loading={string}                  // defaults -\u003e undefined\n  opts={obj}                        // defaults -\u003e {}\n  onReady={func}                    // defaults -\u003e noop\n  onPlay={func}                     // defaults -\u003e noop\n  onPause={func}                    // defaults -\u003e noop\n  onEnd={func}                      // defaults -\u003e noop\n  onError={func}                    // defaults -\u003e noop\n  onStateChange={func}              // defaults -\u003e noop\n  onPlaybackRateChange={func}       // defaults -\u003e noop\n  onPlaybackQualityChange={func}    // defaults -\u003e noop\n/\u003e\n```\n\nFor convenience it is also possible to access the PlayerState constants through react-youtube:\n`YouTube.PlayerState` contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange).\n\n## Example\n\n```jsx\n// js\nimport React from 'react';\nimport YouTube from 'react-youtube';\n\nclass Example extends React.Component {\n  render() {\n    const opts = {\n      height: '390',\n      width: '640',\n      playerVars: {\n        // https://developers.google.com/youtube/player_parameters\n        autoplay: 1,\n      },\n    };\n\n    return \u003cYouTube videoId=\"2g811Eo7K8U\" opts={opts} onReady={this._onReady} /\u003e;\n  }\n\n  _onReady(event) {\n    // access to player in all event handlers via event.target\n    event.target.pauseVideo();\n  }\n}\n```\n\n```tsx\n// ts\nimport React from 'react';\nimport YouTube, { YouTubeProps } from 'react-youtube';\n\nfunction Example() {\n  const onPlayerReady: YouTubeProps['onReady'] = (event) =\u003e {\n    // access to player in all event handlers via event.target\n    event.target.pauseVideo();\n  }\n\n  const opts: YouTubeProps['opts'] = {\n    height: '390',\n    width: '640',\n    playerVars: {\n      // https://developers.google.com/youtube/player_parameters\n      autoplay: 1,\n    },\n  };\n\n  return \u003cYouTube videoId=\"2g811Eo7K8U\" opts={opts} onReady={onPlayerReady} /\u003e;\n}\n```\n\n## Controlling the player\n\nYou can access \u0026 control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events):\n\n\u003e 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:\n\u003e\n\u003e - The event's `target` identifies the video player that corresponds to the event.\n\u003e - The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property.\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroybetz%2Freact-youtube","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftroybetz%2Freact-youtube","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftroybetz%2Freact-youtube/lists"}