YouTube Player API

API reference for Angular YouTube Player component

YouTube Player API

Complete API reference for the Angular YouTube Player component.

Source: /home/daytona/workspace/source/src/youtube-player/youtube-player.ts

Component Inputs

videoId

• Type: string
• Required: Yes (unless using playerVars.list)
• Description: The YouTube video ID to play

<youtube-player videoId="dQw4w9WgXcQ" />

width

• Type: number
• Default: 640
• Description: Width of the player in pixels

<youtube-player videoId="..." [width]="800" />

height

• Type: number
• Default: 390
• Description: Height of the player in pixels

<youtube-player videoId="..." [height]="450" />

startSeconds

• Type: number
• Description: Start playback at a specific time (in seconds)

<youtube-player videoId="..." [startSeconds]="30" />

endSeconds

• Type: number
• Description: End playback at a specific time (in seconds)

<youtube-player videoId="..." [endSeconds]="120" />

suggestedQuality

• Type: YT.SuggestedVideoQuality
• Description: Suggested video quality
• Values: 'small', 'medium', 'large', 'hd720', 'hd1080', 'highres', 'default'

<youtube-player videoId="..." suggestedQuality="hd720" />

playerVars

• Type: YT.PlayerVars
• Description: YouTube Player parameters

import {Component} from '@angular/core';
import {YouTubePlayer} from '@angular/youtube-player';

@Component({
  selector: 'app-player',
  imports: [YouTubePlayer],
  template: `
    <youtube-player 
      videoId="dQw4w9WgXcQ" 
      [playerVars]="playerVars" />
  `
})
export class PlayerComponent {
  playerVars: YT.PlayerVars = {
    autoplay: 1,
    controls: 1,
    modestbranding: 1,
    rel: 0,
    showinfo: 0
  };
}

loadApi

• Type: boolean
• Default: true
• Description: Whether to automatically load the YouTube iframe API

<youtube-player videoId="..." [loadApi]="false" />

disablePlaceholder

• Type: boolean
• Default: false
• Description: Whether to disable the placeholder and load the API immediately

<youtube-player videoId="..." disablePlaceholder />

placeholderImageQuality

• Type: 'low' | 'standard' | 'high'
• Default: 'standard'
• Description: Quality of the placeholder thumbnail image

<youtube-player videoId="..." placeholderImageQuality="high" />

placeholderButtonLabel

• Type: string
• Default: 'Play video'
• Description: Accessible label for the placeholder play button

<youtube-player videoId="..." placeholderButtonLabel="Reproducir vídeo" />

disableCookies

• Type: boolean
• Default: false
• Description: Whether to use youtube-nocookie.com instead of youtube.com

<youtube-player videoId="..." [disableCookies]="true" />

Component Outputs (Events)

ready

• Type: EventEmitter<YT.PlayerEvent>
• Description: Fires when the player is ready

onReady(event: YT.PlayerEvent) {
  console.log('Player is ready');
}

stateChange

• Type: EventEmitter<YT.OnStateChangeEvent>
• Description: Fires when the player state changes

onStateChange(event: YT.OnStateChangeEvent) {
  console.log('Player state:', event.data);
  // -1: unstarted
  //  0: ended
  //  1: playing
  //  2: paused
  //  3: buffering
  //  5: video cued
}

playbackQualityChange

• Type: EventEmitter<YT.OnPlaybackQualityChangeEvent>
• Description: Fires when playback quality changes

playbackRateChange

• Type: EventEmitter<YT.OnPlaybackRateChangeEvent>
• Description: Fires when playback rate changes

error

• Type: EventEmitter<YT.OnErrorEvent>
• Description: Fires when an error occurs

onError(event: YT.OnErrorEvent) {
  console.error('Player error:', event.data);
  // 2: Invalid video ID
  // 5: HTML5 player error
  // 100: Video not found
  // 101/150: Video not embeddable
}

apiChange

• Type: EventEmitter<YT.PlayerEvent>
• Description: Fires when the player’s API changes

Component Methods

Access these methods using ViewChild or viewChild:

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {YouTubePlayer} from '@angular/youtube-player';

@Component({
  selector: 'app-player',
  imports: [YouTubePlayer],
  template: `<youtube-player #player videoId="dQw4w9WgXcQ" />`
})
export class PlayerComponent implements AfterViewInit {
  @ViewChild('player') youtubePlayer!: YouTubePlayer;

  ngAfterViewInit() {
    // Now you can call methods on the player
  }

  playVideo() {
    this.youtubePlayer.playVideo();
  }

  pauseVideo() {
    this.youtubePlayer.pauseVideo();
  }
}

Playback Controls

• playVideo() - Play the video
• pauseVideo() - Pause the video
• stopVideo() - Stop the video
• seekTo(seconds: number, allowSeekAhead: boolean) - Seek to a specific time
• mute() - Mute the player
• unMute() - Unmute the player

Player State

• getPlayerState() - Get current player state
• getCurrentTime() - Get current playback time in seconds
• getDuration() - Get video duration in seconds
• getVolume() - Get volume level (0-100)
• getPlaybackRate() - Get playback speed
• getAvailablePlaybackRates() - Get available playback speeds

Player Settings

• setVolume(volume: number) - Set volume (0-100)
• setPlaybackRate(rate: number) - Set playback speed
• setSize(width: number, height: number) - Resize the player

Video Info

• getVideoUrl() - Get video URL
• getVideoEmbedCode() - Get embed code
• getPlaylist() - Get playlist (if playing a playlist)
• getPlaylistIndex() - Get current position in playlist

Common PlayerVars

Here are commonly used playerVars options:

playerVars: YT.PlayerVars = {
  autoplay: 1,              // Auto-play video (0 or 1)
  controls: 1,              // Show player controls (0, 1, or 2)
  disablekb: 0,            // Disable keyboard controls (0 or 1)
  enablejsapi: 1,          // Enable JS API (0 or 1)
  fs: 1,                   // Show fullscreen button (0 or 1)
  loop: 1,                 // Loop video (0 or 1)
  modestbranding: 1,       // Minimize YouTube branding (0 or 1)
  playsinline: 1,          // Play inline on iOS (0 or 1)
  rel: 0,                  // Show related videos (0 or 1)
  showinfo: 0,             // Show video info (deprecated)
  start: 30,               // Start time in seconds
  end: 120,                // End time in seconds
  iv_load_policy: 3,       // Hide video annotations (1 or 3)
  cc_load_policy: 1,       // Show closed captions (0 or 1)
  cc_lang_pref: 'en',      // Caption language
  color: 'white',          // Progress bar color ('red' or 'white')
  hl: 'en',                // Interface language
  list: 'PLxxxxxxxx',      // Playlist ID
  listType: 'playlist',    // List type ('playlist', 'search', 'user_uploads')
}

Complete Example

import {Component, ViewChild, signal} from '@angular/core';
import {YouTubePlayer} from '@angular/youtube-player';

@Component({
  selector: 'app-player',
  imports: [YouTubePlayer],
  template: `
    <youtube-player
      #player
      [videoId]="videoId()"
      [width]="800"
      [height]="450"
      [playerVars]="playerVars"
      (ready)="onReady($event)"
      (stateChange)="onStateChange($event)"
      (error)="onError($event)" />
      
    <div class="controls">
      <button (click)="play()">Play</button>
      <button (click)="pause()">Pause</button>
      <button (click)="stop()">Stop</button>
    </div>
  `
})
export class PlayerComponent {
  @ViewChild('player') youtubePlayer!: YouTubePlayer;
  
  videoId = signal('dQw4w9WgXcQ');
  
  playerVars: YT.PlayerVars = {
    autoplay: 0,
    controls: 1,
    modestbranding: 1,
    rel: 0
  };
  
  onReady(event: YT.PlayerEvent) {
    console.log('Player ready');
  }
  
  onStateChange(event: YT.OnStateChangeEvent) {
    console.log('State:', event.data);
  }
  
  onError(event: YT.OnErrorEvent) {
    console.error('Error:', event.data);
  }
  
  play() {
    this.youtubePlayer.playVideo();
  }
  
  pause() {
    this.youtubePlayer.pauseVideo();
  }
  
  stop() {
    this.youtubePlayer.stopVideo();
  }
}

Source Code

View the youtube-player.ts source code on GitHub.