{"id":15497507,"url":"https://github.com/bcomnes/youtube-component","last_synced_at":"2025-04-22T21:45:09.632Z","repository":{"id":48119731,"uuid":"100808296","full_name":"bcomnes/youtube-component","owner":"bcomnes","description":"A native DOM component for embedding youtube video players","archived":false,"fork":false,"pushed_at":"2020-05-25T04:09:29.000Z","size":398,"stargazers_count":37,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T19:11:12.574Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://youtube-component.netlify.com","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/bcomnes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-19T16:52:34.000Z","updated_at":"2024-01-09T10:25:14.000Z","dependencies_parsed_at":"2022-08-12T19:00:55.061Z","dependency_job_id":null,"html_url":"https://github.com/bcomnes/youtube-component","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcomnes%2Fyoutube-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcomnes%2Fyoutube-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcomnes%2Fyoutube-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bcomnes%2Fyoutube-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bcomnes","download_url":"https://codeload.github.com/bcomnes/youtube-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250330517,"owners_count":21412991,"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":"2024-10-02T08:39:01.894Z","updated_at":"2025-04-22T21:45:09.612Z","avatar_url":"https://github.com/bcomnes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# youtube-component [![stability][0]][1]\n[![npm version][2]][3] [![build status][4]][5]\n[![downloads][8]][9] [![js-standard-style][10]][11]\n\nA native DOM component wrapper for embedded videso from sites like youtube.\n\n![](screenshot.png)\n\n## Usage\n\n```js\n// Vanilla JS example\nvar YoutubeComponent = require('youtube-component')\n\nvar video1 = new YoutubeComponent()\nvar video2 = new YoutubeComponent()\nvar video3 = new YoutubeComponent()\n\ndocument.body.appendChild(video1.render('https://www.youtube.com/watch?v=jnGtXnpZYDY\u0026t=910s'))\ndocument.body.appendChild(video2.render('https://vimeo.com/200671029'))\ndocument.body.appendChild(video3.render('http://www.dailymotion.com/video/x2ipgus'))\n\n```\n\n## Installation\n```sh\n$ npm install youtube-component\n```\n## API\n### `YoutubeComponent = require('youtube-component`)\nImport `YoutubeComponent` component class.\n\n### `video = new YoutubeComponent([opts])`\nCreate an instance of a video component.  Options are passed directly to [embed-video][ev].  See that module for full API reference.\n\n```js\n{\n  query: { // ANY\n    portrait: 0,\n    color: '333'\n  },\n  attr: { // ANY\n    width:400,\n    height:200\n  },\n  placeholder: true // Disable placeholder text\n  class: '' // class attribute string to apply to wrapping div\n}\n```\n\n### `video.render(videoURL)`\nReturns an iframe if not mounted, otherwise returns a proxy element.  See [nanocomponent][nc] for more information on native DOM component API details.  Video embedding powered by [embed-video][ev] 👏.  If a bad or unsupported URL is passed in, a placeholder text will appear.\n\nNative DOM component model powered by [nanocomponent][nc] and [nanomorph][nm].\n\n## License\n[MIT](https://tldrlegal.com/license/mit-license)\n\n[0]: https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\n[1]: https://nodejs.org/api/documentation.html#documentation_stability_index\n[2]: https://img.shields.io/npm/v/youtube-component.svg?style=flat-square\n[3]: https://npmjs.org/package/youtube-component\n[4]: https://img.shields.io/travis/bcomnes/youtube-component/master.svg?style=flat-square\n[5]: https://travis-ci.org/bcomnes/youtube-component\n[8]: http://img.shields.io/npm/dm/youtube-component.svg?style=flat-square\n[9]: https://npmjs.org/package/youtube-component\n[10]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[11]: https://github.com/feross/standard\n[bel]: https://github.com/shama/bel\n[yoyoify]: https://github.com/shama/yo-yoify\n[md]: https://github.com/patrick-steele-idem/morphdom\n[210]: https://github.com/patrick-steele-idem/morphdom/pull/81\n[nm]: https://github.com/yoshuawuyts/nanomorph\n[ce]: https://github.com/yoshuawuyts/cache-element\n[class]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\n[isSameNode]: https://github.com/choojs/nanomorph#caching-dom-elements\n[onload]: https://github.com/shama/on-load\n[choo]: https://github.com/choojs/choo\n[nca]: https://github.com/choojs/nanocomponent-adapters\n[nc]: https://github.com/choojs/nanocomponent\n[ev]: https://github.com/alanshaw/embed-video\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcomnes%2Fyoutube-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbcomnes%2Fyoutube-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbcomnes%2Fyoutube-component/lists"}