{"id":13497472,"url":"https://github.com/SamirHodzic/ngx-embed-video","last_synced_at":"2025-03-28T22:31:45.213Z","repository":{"id":18804509,"uuid":"85351197","full_name":"SamirHodzic/ngx-embed-video","owner":"SamirHodzic","description":"Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+.","archived":false,"fork":false,"pushed_at":"2022-02-12T20:59:47.000Z","size":88,"stargazers_count":56,"open_issues_count":17,"forks_count":42,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T01:04:39.625Z","etag":null,"topics":["angular","angular4","dailymotion","embed-videos","typescript","video","vimeo","youtube"],"latest_commit_sha":null,"homepage":"","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/SamirHodzic.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}},"created_at":"2017-03-17T20:16:00.000Z","updated_at":"2022-11-14T13:59:23.000Z","dependencies_parsed_at":"2022-08-07T09:00:58.296Z","dependency_job_id":null,"html_url":"https://github.com/SamirHodzic/ngx-embed-video","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamirHodzic%2Fngx-embed-video","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamirHodzic%2Fngx-embed-video/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamirHodzic%2Fngx-embed-video/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SamirHodzic%2Fngx-embed-video/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SamirHodzic","download_url":"https://codeload.github.com/SamirHodzic/ngx-embed-video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245910727,"owners_count":20692493,"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":["angular","angular4","dailymotion","embed-videos","typescript","video","vimeo","youtube"],"created_at":"2024-07-31T20:00:31.512Z","updated_at":"2025-03-28T22:31:44.864Z","avatar_url":"https://github.com/SamirHodzic.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ngx-embed-video\n\n\u003e Get embed code for embedding youtube/vimeo/dailymotion/\\* video in websites from URL or ID in Angular 6+.\n\u003e Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!\n\n[![npm-url][npm-url-svg]][npm-url]\n[![npm-url][down-url-svg]][npm-url]\n[![npm-url][down-url-dw-svg]][npm-url]\n[![build-url][build-url-svg]][build-url]\n[![Dependencies][dependencies]][dependencies-url]\n\nPlay with `ngx-embed-video` live on [stackblitz.com/ngx-embed-video-example](https://stackblitz.com/edit/ngx-embed-video-example).\n\n## Installation\n\nTo install ngx-embed-video library, run:\n\n```bash\n$ npm install ngx-embed-video --save\n```\n\n## Consuming EmbedVideo library\n\nand then in your Angular `AppModule`:\n\n```typescript\nimport { HttpClientModule } from '@angular/common/http';\nimport { EmbedVideo } from 'ngx-embed-video';\n\n@NgModule({\n  imports: [HttpClientModule, EmbedVideo.forRoot()]\n})\nexport class AppModule {}\n```\n\nOnce your library is imported, you can use it in your Angular application.\n\nExample usage:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { EmbedVideoService } from 'ngx-embed-video';\n\n@Component({\n  selector: 'app-component',\n  templateUrl: './template.html'\n})\nexport class AppComponent {\n  vimeoUrl = 'https://vimeo.com/197933516';\n  youtubeUrl = 'https://www.youtube.com/watch?v=iHhcHTlGtRs';\n  dailymotionUrl =\n    'https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport';\n\n  vimeoId = '197933516';\n  youtubeId = 'iHhcHTlGtRs';\n  dailymotionId = 'x20qnej';\n\n  constructor(private embedService: EmbedVideoService) {\n    console.log(this.embedService.embed(this.vimeoUrl));\n    console.log(this.embedService.embed(this.youtubeUrl));\n    console.log(this.embedService.embed(this.dailymotionUrl));\n\n    console.log(this.embedService.embed_vimeo(this.vimeoId));\n    console.log(this.embedService.embed_youtube(this.youtubeId));\n    console.log(this.embedService.embed_dailymotion(this.dailymotionId));\n  }\n}\n```\n\nExample output:\n\n```html\n\u003ciframe\n  src=\"https://player.vimeo.com/video/197933516\"\n  frameborder=\"0\"\n  webkitallowfullscreen\n  mozallowfullscreen\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n\u003ciframe\n  src=\"https://www.youtube.com/embed/iHhcHTlGtRs\"\n  frameborder=\"0\"\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n\u003ciframe\n  src=\"https://www.dailymotion.com/embed/video/x20qnej\"\n  frameborder=\"0\"\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n\n\u003ciframe\n  src=\"https://player.vimeo.com/video/197933516\"\n  frameborder=\"0\"\n  webkitallowfullscreen\n  mozallowfullscreen\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n\u003ciframe\n  src=\"https://www.youtube.com/embed/iHhcHTlGtRs\"\n  frameborder=\"0\"\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n\u003ciframe\n  src=\"https://www.dailymotion.com/embed/video/x20qnej\"\n  frameborder=\"0\"\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n```\n\nExample usage with sanitized innerHtml iframe:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { EmbedVideoService } from 'ngx-embed-video';\n\n@Component({\n  selector: 'app-component',\n  template: '\u003cdiv [innerHtml]=\"iframe_html\"\u003e\u003c/div\u003e',\n})\nexport class AppComponent {\n  iframe_html: any;\n  youtubeUrl = \"https://www.youtube.com/watch?v=iHhcHTlGtRs\";\n\n  constructor(\n    private embedService: EmbedVideoService\n  ) {\n    this.iframe_html = this.embedService.embed(youtubeUrl);\n  )\n}\n```\n\n## Usage\n\n### embed(url, [options])\n\nReturn an HTML fragment embed code (string) for the given video URL.\n\n### embed_vimeo(id, [options])\n\nReturn an HTML fragment embed code (string) for the given _vimeo_ video ID.\n\n### embed_youtube(id, [options])\n\nReturn an HTML fragment embed code (string) for the given _youtube_ video ID.\n\n### embed_dailymotion(id, [options])\n\nReturn an HTML fragment embed code (string) for the given _dailymotion_ video ID.\n\n### embed_image(url, [options])\n\nReturns an HTML `\u003cimg\u003e` tag (string) for the given url and the `link` in a callback.\n\n```js\n{\n  link: //img.youtube.com/vi/iHhcHTlGtRs/default.jpg,\n  http: html: \u003cimg src=\"http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg\" /\u003e;\n}\n```\n\n## Options\n\n### query\n\nObject to be serialized as a querystring and appended to the embedded content url.\n\n#### Example\n\n```typescript\nthis.embedService.embed_vimeo('197933516', {\n  query: { portrait: 0, color: '333' }\n});\n```\n\nOutput:\n\n```html\n\u003ciframe\n  src=\"https://player.vimeo.com/video/197933516?portrait=0\u0026color=333\"\n  frameborder=\"0\"\n  webkitallowfullscreen\n  mozallowfullscreen\n  allowfullscreen\n\u003e\u003c/iframe\u003e\n```\n\n### attributes\n\nObject to add additional attributes (any) to the iframe\n\n#### Example\n\n```typescript\nthis.embedService.embed('https://youtu.be/iHhcHTlGtRs', {\n  query: { portrait: 0, color: '333' },\n  attr: { width: 400, height: 200 }\n});\n```\n\nOutput:\n\n```html\n\u003ciframe\n  src=\"https://www.youtube.com/embed/iHhcHTlGtRs?portrait=0\u0026color=333\"\n  frameborder=\"0\"\n  allowfullscreen\n  width=\"400\"\n  height=\"200\"\n\u003e\u003c/iframe\u003e\n```\n\n#### Youtube Image options\n\n- default\n- mqdefault\n- hqdefault\n- sddefault\n- maxresdefault\n\n```typescript\nthis.embedService\n  .embed_image(\n    'https://www.youtube.com/watch?v=iHhcHTlGtRs', \n    { image: 'mqdefault' }\n  )\n  .then(res =\u003e {\n    this.thumbnail = res.html;\n  });\n```\n\n#### Vimeo Image options\n\n- thumbnail_small\n- thumbnail_medium\n- thumbnail_large\n\n```typescript\nthis.embedService\n  .embed_image(\n    'https://vimeo.com/197933516', \n    { image: 'thumbnail_medium' }\n  )\n  .then(res =\u003e {\n    this.thumbnail = res.html;\n  });\n```\n\n#### Dailymotion Image options\n\n- thumbnail_60_url\n- thumbnail_120_url\n- thumbnail_180_url\n- thumbnail_240_url\n- thumbnail_360_url\n- thumbnail_480_url\n- thumbnail_720_url\n- thumbnail_1080_url\n\n```typescript\nthis.embedService\n  .embed_image(\n    'https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport',\n    { image: 'thumbnail_720_url' }\n  )\n  .then(res =\u003e {\n    this.thumbnail = res.html;\n  });\n```\n\n## License\n\nMIT\n\n[build-url]: https://travis-ci.org/SamirHodzic/ngx-embed-video\n[build-url-svg]: https://travis-ci.org/SamirHodzic/ngx-embed-video.svg?branch=master\n[down-url-svg]: https://img.shields.io/npm/dt/ngx-embed-video.svg\n[down-url-dw-svg]: https://img.shields.io/npm/dw/ngx-embed-video.svg\n[dependencies]: https://david-dm.org/samirhodzic/ngx-embed-video.svg\n[dependencies-url]: https://david-dm.org/samirhodzic/ngx-embed-video\n[npm-url-svg]: https://img.shields.io/npm/v/ngx-embed-video.svg\n[npm-url]: https://www.npmjs.com/package/ngx-embed-video\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamirHodzic%2Fngx-embed-video","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSamirHodzic%2Fngx-embed-video","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSamirHodzic%2Fngx-embed-video/lists"}