Youtube embedded player wrapper
- NPM Install
npm i ngx-ytplayer
- Import YtPlayerModule
import { YtPlayerModule } from './yt-player/yt-player.module';
@NgModule({
// ...something...
imports: [YtPlayerModule]
// ...something...
})
export class YourModule {}- Add
divElement withytPlayerdirective
<div ytPlayer
style="height:800px;"
[videoId]="videoId" // Youtube Video Id
[(volume)]="volume" // Volume
[autoPlay]="false" // Auto play when loaded
[loop]="true" // Auto replay when ended
[showFullScreenButton]="false" // hidden full screen button
[showControls]="true" // show player controls
[enableKB]="true" // enable keyboard control
(stateChange)="eventChange($event)" // hook player state
(currentTimeChange)="updateCurrentTime($event)" // hook player current time
(durationChange)="duration=$event" // get video duration when video loaded
></div>| Property | Input | Output | Default | Summary |
|---|---|---|---|---|
| state | ✔️ | SDK_Loading | Player current state | |
| videoId | ✔️ | ✔️ | null | Youtube video id |
| nativePlayer | ✔️ | null | Get native youtube player | |
| autoPlay | ✔️ | ✔️ | false | Auto play when video loaded |
| loop | ✔️ | ✔️ | false | Auto replay when end |
| showControls | ✔️ | ✔️ | true | Show native youtube player controls |
| enableKB | ✔️ | ✔️ | true | Enable keyboard control |
| showRelatedVideos | ✔️ | ✔️ | false | Show related videos when pause or end |
| showYoutubeLogo | ✔️ | ✔️ | false | Show youtube logo |
| showFullScreenButton | ✔️ | ✔️ | false | Show full screen button in native controls |
| volume | ✔️ | ✔️ | 100 | Get or set player volume |
| currentTime | ✔️ | 0 | Get player current time | |
| duration | ✔️ | 0 | Get player current duration |
| Event | Summary |
|---|---|
| stateChange | Player state change |
| volumeChange | Player volume change |
| currentTimeChange | Player current time change |
| durationChange | Player durection change |
| nativeError | Youtube player error |
| nativeStateChange | Youtube player state change |