How to Embed a YouTube video in Angular?

Question

I was following this tutorial on YouTube, and it's basically a table with the music you like, but the tutorial ends.

It's using Angular2, and everything is working correctly however where the gentleman left it, it's just showing the constructor of the video in the console with this code:

*Playlist.Component.Ts:

export class PlaylistComponent{ 
onSelect(vid:Video) { 
console.log(JSON.stringify(vid)); } }

*Playlist.Component.html:

<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr *ngFor="#v of videos" (click)="onSelect(v)">
<td>{{ v.id }}</td>
<td>{{ v.title }}</td>
<td>{{ v.desc }}</td>
</tr>
</tbody>
</table>

*App.Component.Ts:

import {Component} from 'angular2/core';
import {Config} from './config.service';
import {Video} from './video';
import {PlaylistComponent} from './playlist.component';

@Component({
    selector: 'my-app',
    templateUrl: 'app/ts/app.component.html',
    directives: [PlaylistComponent]
})

export class AppComponent {
    mainHeading = Config.MAIN_HEADING;
    videos:Array<Video>;

    constructor() {

        this.videos = [
            new Video(1, "The 1975 - Somebody Else", "Bimd2nZirT4", "Calm."),
            new Video(2, "Killswitch Engage - Holy Diver", "NR7dG_m3MsI", "Hell Yeah!")
        ]


    }
}

*And finally the Video.ts:

export class Video {
    id: number;
    title: string;
    videoCode: string;
    desc: string;

    constructor(id: number, title: string, videoCode: string, desc: string){
          this.id = id;
          this.title = title;
          this.videoCode = videoCode;
          this.desc = desc;
    }
}

How would I get it to actually embed the YouTube video in the browser once you click on the table?

All Іѕ Vаиітy · Accepted Answer · 2019-03-12T17:37:50.903

YouTube videos are embedded as iframe. One embed code look like this,

<iframe width="560" height="315" src="https://www.youtube.com/embed/1ozGKlOzEVc" frameborder="0" allowfullscreen></iframe>

To make the YouTube Video work with Angular 2+, you have to sanitize the URL first.

import DomSanitizer to use it. So pass the videoURL as https://www.youtube.com/watch?v=1ozGKlOzEVc.

import { DomSanitizer } from '@angular/platform-browser';

Then add it to your constructor

constructor(videoURL: string, private _sanitizer: DomSanitizer){
   this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(videoURL);
}

Then bind the value safeUrl to iframe.

<iframe [src]='safeURL' frameborder="0" allowfullscreen></iframe>

Cheers dude, had it sorted now ! :) – Arun Purewal Mar 01 '17 at 21:18 — Arun Purewal, Mar 01 '17 at 21:18

score 16 · Answer 2 · answered Mar 12 '20 at 12:53

There is now an Angular YouTube Player component

To understand the API you need to read the source. It has various inputs, outputs and functions. For example:

example.component.html

<youtube-player
  #player
  [videoId]="videoId"
  (ready)="onReady($event)"
  (stateChange)="onStateChange($event)"
></youtube-player>

example.component.ts

import { Component, Input, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'example'
  templateUrl: './example.component.html'
})
class YoutubePlayerExample implements OnInit {
  @ViewChild('player') player: any;
  videoId: string;

  @Input()
  set id(id: string) {
    this.videoId = id;
  }

  ngOnInit() {
    const tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(tag);
  }

  // Autoplay
  onReady() {
    this.player.mute();         
    this.player.playVideo();    
  }

  // Loop
  onStateChange(event) {
    if (event.data === 0) {
      this.player.playVideo();  
    }
  }
}

example-module.ts

import { NgModule } from '@angular/core';
import { YouTubePlayerModule } from '@angular/youtube-player';

@NgModule({
  imports: [YouTubePlayerModule],
  declarations: [YoutubePlayerExample]
})
export class YoutubePlayerExampleModule {}

score 3 · Answer 3 · answered Mar 22 '20 at 18:00

I had same problem after many changes nothing happened. Luckily I realized to disable adblocker after that embedded video played Successfully on my page. Make sure your adblocker disabled.

videoUrl = 'https://www.youtube.com/embed/your-videoId'
constructor(private authService: AuthService, private _sanitizer: DomSanitizer) {
    this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(this.videoUrl);
}

<iframe [src]='safeURL' width="560" height="315" frameborder="0" allowfullscreen></iframe>

score 2 · Answer 4 · answered Feb 24 '17 at 13:04

2

I don't know where exactly do you want to embed video but you can put somewhere in your HTML:

<iframe width="420" height="315" [src]="'https://www.youtube.com/embed/' + v.videoCode"></iframe>

answered Feb 24 '17 at 13:04

Igor Janković

5,494
6
32
46

Thanks, I will give it a try (if it's something simple I apologize I'm still new to all this) – Arun Purewal Feb 24 '17 at 13:08
Btw, you are using some angular 2 beta version - *ngFor="#v of videos" is old syntax. The new one is *ngFor="let v of videos" – Igor Janković Feb 24 '17 at 13:09
Thanks, just trying to grasp the basics first, I have a Pluralsight account now and will do the most up to date Tutorials but I started this one and wanted to see it through :) – Arun Purewal Feb 24 '17 at 13:14
I tried implementing the code into my HTML, but would come up with an error in the console. Would it be better to make a player-component.ts , html and then do a click event to produce the embedded player? – Arun Purewal Feb 24 '17 at 13:31
I put the code in the wrong html file that's why, no worries , the player is embedding, I just need to set the onclick event to play the video there :) – Arun Purewal Feb 24 '17 at 13:34
Is there a way I can send you a Zip file of my code so you can see it, and I can explain it properly then? – Arun Purewal Feb 24 '17 at 13:39

score 1 · Answer 5 · answered Sep 13 '18 at 09:51

Try this:

component.ts
------------
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
::
::
::
export class MyComponent implements OnInit {
public safeURL: SafeResourceUrl;
constructor(private _sanitizer: DomSanitizer) { 
this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/WovwuOFBUuY');
}
}

HTML:
----    
<tr>
<td>AliceMovie</td><td><iframe width="560" height="315" [src]='safeURL' frameborder="0" allowfullscreen></iframe><td>
<td>

How to Embed a YouTube video in Angular?

5 Answers5

Linked