Wie kann ich ein YouTube-Video in Angular2 einbetten?

Question

Ich habe dieses Tutorial auf YouTube verfolgt und es ist im Grunde eine Tabelle mit der Musik, die du magst, aber das Tutorial endet.

Es Angular2 ist mit, und alles funktioniert aber richtig, wo der Herr sie verlassen, es ist nur mit diesem Code den Konstruktor des Videos in der Konsole zeigt:

* 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!") 
     ] 


    } 
} 

* Und schließlich die 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; 
    } 
} 

Wie würde ich es eigentlich das YouTube-Video im Browser, sobald Sie einzubetten Klicken Sie auf den Tisch?

Answer 1

YouTube-Videos werden als iframe eingebettet. Ein Einbettungscode wie folgt aussehen,

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

Um die YouTube-Video-Arbeit mit kantigem 2 zu machen, müssen Sie zuerst die URL sanieren.

DomSanitizer importieren, um es zu verwenden. Übergeben Sie videoURL als https://www.youtube.com/watch?v=1KT2asqA1J8.

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

Dann fügen Sie es zu Ihrem Konstruktor

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

Dann den Wert safeUrl zu iframe binden.

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

Answer 2

Ich weiß nicht, wo genau sehen Sie Video einbetten möchten, aber Sie können irgendwo in Ihrem HTML setzen:

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