¿Cómo incrustar un video de YouTube en Angular?

Solución:

Los videos de YouTube están incrustados como iframe. Un código de inserción se ve así,

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

Para que el video de YouTube funcione con Angular 2+, primero debe desinfectar la URL.

importa DomSanitizer para usarlo. Así que pasa el videoURL como
https://www.youtube.com/watch?v=1ozGKlOzEVc.

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

Luego agrégalo a tu constructor

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

Luego une el valor safeUrl a iframe.

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

Ahora hay un componente de reproductor de YouTube angular

Para comprender la API, debe leer la fuente. Tiene varias entradas, salidas y funciones. Por ejemplo:

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();  
    }
  }
}

ejemplo-module.ts

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

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

---

---

Utiliza Nuestro Buscador