https://github.com/hernior/ngx-youtube-player
A youtube component wrapped with Angular
https://github.com/hernior/ngx-youtube-player
angular video-player youtube
Last synced: 9 months ago
JSON representation
A youtube component wrapped with Angular
- Host: GitHub
- URL: https://github.com/hernior/ngx-youtube-player
- Owner: Hernior
- License: mit
- Fork: true (orizens/ngx-youtube-player)
- Created: 2022-10-06T14:49:52.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-08T21:04:34.000Z (over 1 year ago)
- Last Synced: 2025-01-08T22:12:57.057Z (over 1 year ago)
- Topics: angular, video-player, youtube
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@hercilio/ngx-youtube-player
- Size: 1.02 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/Hernior/ngx-youtube-player)
[](https://badge.fury.io/js/ngx-youtube-player)
[](https://img.shields.io/npm/dm/ngx-youtube-player.svg)
[](https://img.shields.io/npm/dt/ngx-youtube-player.svg)
# Angular Youtube Player Component
This is an Angular component based on [youtube player iframe api](https://developers.google.com/youtube/iframe_api_reference).
This component came out as a result of the [open source project Echoes Player](http://github.com/Hernior/echoes-player) - an alternative player for watching and listening to media from youtube.
Original project: https://github.com/Hernior/ngx-youtube-player
##
## Angular Support
**Compatible with Angular v14**, versions follow Angular's version to easily reflect compatibility.
Starting with Angular v14.2.5.
## LICENSE
This fork project is free to use, released under **MIT** license.
## Installation
`npm install @hercilio/ngx-youtube-player`
## Supported API
Currently supported attributes:
### Inputs
- **height** (number) - optional height for the player
- **width** (number) - optional width for the player
- **videoId** (string) - will load the specified video by id
### outputs
- **ready** (YT.Player) - implements youtube's player onReady event -> sends a the new created yt player instance
- **change** - a state change event channeling the youtube's player instance state event object
## DEMO
[A Live Demo In StackBlitz](https://stackblitz.com/edit/ngx-youtube-player?file=src%2Fapp%2Fapp.module.ts)
## Usage
First, import the YoutubePlayerModule to your module:
```typescript
import { NgxYoutubePlayerModule } from 'ngx-youtube-player';
...
@NgModule({
...
imports: [..., NgxYoutubePlayerModule.forRoot()],
...
})
export class AppModule {}
```
Next, use the **youtube-player** component. A Unique Id will be created for this player's instance:
```typescript
import { Component } from "@angular/core";
@Component({
selector: "app",
template: `
`,
})
export class AppComponent {
player: YT.Player;
private id: string = "L-odCf4MfJc";
savePlayer(player) {
this.player = player;
console.log("player instance", player);
}
onStateChange(event) {
console.log("player state", event.data);
}
}
```
## Testing
To start developing tdd/bdd style: `npm run dev`
This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.
Travis-ci is integrated
## Building & Publish
- npm run build:lib
- cd dist/ngx-youtube-player
- npm publish --access public
# Showcase Examples
- [Echoes Player](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/Hernior/echoes-player))