Hoy veremos como incrustar un vídeo de YouTube en Angular.
Cuando desarrollamos una aplicación web SPA con Angular y queremos cargar un vídeo dentro de nuestra web no basta solo con usar la etiqueta iframe para hacerlo. Normalmente esto no nos terminará de funcionar.
Lo que tendremos que hacer para incrustar un vídeo de YouTube en Angular es lo siguiente.
Paso 1. Importar DomSanitizer:
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
Paso 2. Inyectar la dependencia en el constructor:
constructor(
private _sanitizer: DomSanitizer
){}
Paso 3. Definir un método al que le pasemos la url del video de YouTube y nos genere una url para embeberlo o incrustarlo:
getVideoIframe(url) {
var video, results;
if (url === null) {
return '';
}
results = url.match('[\\?&]v=([^&#]*)');
video = (results === null) ? url : results[1];
return this._sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + video);
}
Paso 4. Crear un iframe y utilizar el método que hemos creado para generar la url del vídeo embebido:
<p> <iframe width="560" height="315" [src]="getVideoIframe(video.url)" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p>
Con esto ya sabemos como incrustar un video de YouTube en Angular dentro de un iframe de manera muy sencilla 🙂
Esto es todo por este tutorial, recuerda que si quieres aprender JavaScript y desarrollo web avanzado con JS y Angular puedes apuntarte a estos dos cursos:
Muchas gracias, nos vemos en el próximo post 🙂
