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?

Answer 1

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> 

Answer 2

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