Como añadir videos de Youtube en unas sencillos pasos
Published: 2020-08-18 05:56:55

---
title: Como añadir videos de Youtube en unas sencillos pasos
published: true
description: Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular.
tags: 
//cover_image: https://direct_url_to_image.jpg
---
<article class="h-entry">

<header>

# Angular 9 — Como añadir videos de Youtube en unas sencillos pasos

</header>

<section data-field="subtitle" class="p-summary">Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular</section>

<section data-field="body" class="e-content">

<section name="9a99" class="section section--body section--first">

<div class="section-divider">

* * *

</div>

<div class="section-content">

<div class="section-inner sectionLayout--insetColumn">

### Angular 9 — Como añadir videos de Youtube en unas sencilos pasos

#### Pasos a seguir para poder hacer uso YouTube Player Component y visualizar videos de Youtube en nuestras apps de Angular

El propósito de este artículo es enseñaros como añadir el reproductor de Youtube con el video seleccionado de una manera muy fácil.

Como bien sabréis, seguramente habréis experimentado “la agradable sensación” de tener que configurar con bastante esfuerzo todo el apartado para poder visualizar videos de Youtube en Angular.

Esto nos ha ocurrido hasta la versión 8.2 donde teníamos que hacer uso del Dom Sanitizer, para poder “desinfectar” nuestra app frente a ello, para poder trabajar con un iframe.

Desde la versión 9 de Angular, por suerte, este quebradero de cabeza ha pasado a mejor historia. Empecemos.

### 0.- Necesario

*   Tener creado el proyecto de Angular (versión 9) y disponible para trabajar.

### 1.- Instalar el paquete de Youtube

Instalaremos el [paquete de YouTube player en npm](https://www.npmjs.com/package/@angular/youtube-player) ejecutando el siguiente comando estando ubicados en el directorio raíz de nuestro proyecto de Angular.

    npm install @angular/youtube-player

### 2.- Importar el módulo YoutubePlayer

Importaremos el módulo YouTube Player modules en nuestro fichero app.module.ts (o en su defecto, en el módulo donde vayamos a aplicar directamente)

    import { YouTubePlayerModule } from "@angular/youtube-player";

    ...

     imports: [    ....,    YouTubePlayerModule,    ...  ],

### 3.- Componente YouTube Player en el HTML

Una vez realizados los dos primeros pasamos, ya podemos agregar el componente del reproductor de YouTube en nuestro componente objetivo (app.component en este caso) como se muestra a continuación con el ID del video de YouTube.

Podemos obtener fácilmente cualquier identificación desde video de YouTube seleccionado. La identificación del video de YouTube se presentará en la propia URL.

#### 3.1.- URL del ejemplo — ¿Qué es GraphQL?:

<pre name="f1df" id="f1df" class="graf graf--pre graf-after--h4">[https://www.youtube.com/watch?v=80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE)</pre>

Dentro de la URL, encontramos el ID del video después de **?v=** que es [80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE). Teniendo esto como referencia, añadimos el siguiente código con las siguientes configuraciones que explicaré detalladamente posteriormente.

    <youtube-player   videoId="

#### 3.2.- Detalles de los parámetros

*   `**[videoId]: string **`— YouTube Video ID to render El ID del video de Youtube que vamos a mostrar. Es el hash final que encontraremos dentro de la URL después de **?v=**. Por ejemplo, si nuestro video tiene la siguiente URL [https://www.youtube.com/watch?v=80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE), nuestro `**videoId**` es [80_Cr9m-1fE](https://www.youtube.com/watch?v=80_Cr9m-1fE).
*   `**[height]: number** `—Altura del reproductor del video
*   `**[width]: number** `—Ancho del reproductor del video
*   `**[startSeconds]: number **`— Momento en el que queremos que el reproductor empiece a reproducir. El número corresponde al segundo del video donde comenzará. En nuestro ejemplo empezamos en el segundo 4.
*   `**[endSeconds]: number**`— Momento en el que queremos que el reproductor termine de reproducir. El número corresponde al segundo del video donde finalizará. En nuestro ejemplo terminamos en el segundo 8.
*   `**[suggestedQuality]**:`— La calidad sugerida en el reproductor. Tendremos los siguientes valores disponibles `'default'` , `'small'`, `'medium'`, `'large'`, `'hd720'`, `'hd1080'` y `'highres'`,
*   `**[showBeforeIframeApiLoads]: boolean**`— El iframe intentará cargarse independientemente del estado de la API en la página. Establecemos esto como verdadero si no deseamos que el campo onYouTubeIframeAPIReady se establezca en la ventana global.

Más información sobre como trabajar con este componente [aquí.](https://github.com/angular/components/blob/master/src/youtube-player/README.md)

### 4.- Añadir el script de Youtube API en la aplicación

Podemos hacerlo de dos maneras. Cualquiera de ellas sería válida.

#### 4.1.- Añadiendo el script en el index.html

    <script src="https://www.youtube.com/iframe_api"></script>

#### 4.2.- Añadiendo el script en el componente que usaremos

### 5.- Resultado

A continuación os muestro como se vería nuestro resultado.

[https://angular-youtube-demo.stackblitz.io](https://angular-youtube-demo.stackblitz.io)

<figure name="211f" id="211f" class="graf graf--figure graf-after--p">

<div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 481px;">![](https://cdn-images-1.medium.com/max/800/1*ofSO-Gu5OAd0TAeELy7GDg.png)</div>

</figure>

### 6.- Crear nuestro ejemplo

Ahora que sabemos como configurar y como añadir el reproductor de Youtube de una manera sencilla, ¡vamos a intentarlo por nuestra cuenta! ¡Ánimo!

</div>

</div>

</section>

<section name="94f8" class="section section--body section--last">

<div class="section-divider">

* * *

</div>

<div class="section-content">

<div class="section-inner sectionLayout--insetColumn">

Gracias por leer este artículo, espero que te haya sido útil y puedas compartirlo con la mayor gente posible, para poder dar opción a otras personas de disfrutar de este tipo de contenido.

Si no me sigues, te invito a hacerlo ;)

### 7.- Contacto

*   Medium: [https://medium.com/@mugan86](https://medium.com/@mugan86)
*   Udemy: [https://www.udemy.com/user/anartzmugika/](https://www.udemy.com/user/anartzmugika/)
*   Twitter: [https://twitter.com/mugan86](https://twitter.com/mugan86)
*   Instagram: [https://www.instagram.com/anartz.mugika.ledo/](https://www.instagram.com/anartz.mugika.ledo/)
*   Telegram: [https://t.me/anartzmugika](https://t.me/anartzmugika)

</div>

</div>

</section>

</section>

<footer>

[Canonical link](https://medium.com/@mugan86/angular-9-como-a%C3%B1adir-videos-de-youtube-en-unas-sencilos-pasos-bf8ee55de46b)

</footer>

</article>