ngx-ytplater

Youtube embedded player wrapper

Get Started

1. NPM Install

npm i ngx-ytplayer

2. Import YtPlayerModule

import { YtPlayerModule } from './yt-player/yt-player.module';

@NgModule({
  // ...something...
  imports: [YtPlayerModule]
  // ...something...
})
export class YourModule {}

3. Add div Element with ytPlayer directive

<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>

Properties and events

Properties

| 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 |

Events

| 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 |