Skip to main content

​
Installation

This guide will help you install and configure the Angular YouTube Player component.

​
Install the Package

The easiest way to install is using Angular CLI: 
ng add @angular/youtube-player
Or install manually using npm: 
npm install @angular/youtube-player

​
Import the Component

​
Standalone Components

For standalone components, import YouTubePlayer: 
import {Component} from '@angular/core';
import {YouTubePlayer} from '@angular/youtube-player';

@Component({
  selector: 'app-video',
  imports: [YouTubePlayer],
  template: `
    <youtube-player videoId="dQw4w9WgXcQ" />
  `
})
export class VideoComponent {}

​
NgModule

For NgModule-based apps, import YouTubePlayerModule: 
import {NgModule} from '@angular/core';
import {YouTubePlayerModule} from '@angular/youtube-player';

@NgModule({
  imports: [YouTubePlayerModule],
  // ...
})
export class AppModule {}

​
Load the YouTube API (Optional)

The component will automatically load the YouTube iframe API when needed. However, if you want to preload it, add this script to your index.html: 
<script src="https://www.youtube.com/iframe_api"></script>

​
Verify Installation

Create a simple player to verify everything is working: 
import {Component} from '@angular/core';
import {YouTubePlayer} from '@angular/youtube-player';

@Component({
  selector: 'app-root',
  imports: [YouTubePlayer],
  template: `
    <h1>My First Video</h1>
    <youtube-player 
      videoId="dQw4w9WgXcQ"
      width="640"
      height="390" />
  `
})
export class AppComponent {}
If you see a YouTube video player, you’re all set!

​
Global Configuration

You can configure default behavior globally using the YOUTUBE_PLAYER_CONFIG injection token: 
import {ApplicationConfig} from '@angular/core';
import {YOUTUBE_PLAYER_CONFIG} from '@angular/youtube-player';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: YOUTUBE_PLAYER_CONFIG,
      useValue: {
        loadApi: true,
        disablePlaceholder: false,
        placeholderButtonLabel: 'Play video',
        placeholderImageQuality: 'standard'
      }
    }
  ]
};
For NgModule apps: 
import {NgModule} from '@angular/core';
import {YouTubePlayerModule, YOUTUBE_PLAYER_CONFIG} from '@angular/youtube-player';

@NgModule({
  imports: [YouTubePlayerModule],
  providers: [
    {
      provide: YOUTUBE_PLAYER_CONFIG,
      useValue: {
        loadApi: true,
        disablePlaceholder: false,
        placeholderButtonLabel: 'Play video',
        placeholderImageQuality: 'standard'
      }
    }
  ]
})
export class AppModule {}

​
TypeScript Types

The YouTube Player uses types from the YouTube iframe API. You may want to install the types: 
npm install --save-dev @types/youtube

​
Troubleshooting

​
Video Not Loading

  1. Check Video ID: Ensure the video ID is correct
  2. Check Console: Look for errors in the browser console
  3. Check Embedding: Some videos have embedding disabled
  4. Check Privacy: Age-restricted videos may not load

​
API Not Loading

If the YouTube API fails to load:
  1. Check Network: Ensure you have internet connectivity
  2. Check Blockers: Ad blockers may prevent the API from loading
  3. Check CSP: Content Security Policy may block the script
  4. Manual Load: Try manually loading the API in index.html

​
Next Steps

  • Learn about the YouTube Player API
  • Explore player configuration options
  • Add event handlers for player events

Build docs developers (and LLMs) love

Get started for freeTalk to us