Streaming YouTube Video in Angular Application

Streaming YouTube Video in Angular App

In this blog post, we will go to learn how to integrate your YouTube video into your Angular application.

Pre-requisites :

• Angular must be set up with minimum version 2

Setup an Angular project :

• Use  Angular CLI (Command Line Interface) to create a new project, you can use any of the below commands. Go to the directory where you would like to create a project and then run the below command.
  • ng new <project name> or
  • ng n <project name>

               For example :

• • ng new youtube-video

• Now go into your project directory through the terminal and run the ‘ng serve’  command
  • cd youtube-video
  • ng serve -o

The above command will going to launch the application on http://localhost:4200/ and your project directory will going to look like

After setting up the Angular project perform the below steps:

• In order to play the video, we need to create an embedded URL for which first we need to find the id of  our YouTube video, for example in below URL id is 2dZT9GShJ3A&t=190s
  • https://www.youtube.com/watch?v=2dZT9GShJ3A&t=190s
• Use code is given in the next step to form your embedded URL by concatenating your video id with the URL https://www.youtube.com/embed/ for example
  • https://www.youtube.com/embed/2dZT9GShJ3A&t=190s
• Copy below code in your app.component.ts file which is available in your project directory

            import { Component } from ‘@angular/core’;

             @Component({

                        selector: ‘app-root’,

                       templateUrl: ‘./app.component.html’,

                       styleUrls: [‘./app.component.css’]

                 })

                export class AppComponent {

                       public youtubeUrl = ‘https://www.youtube.com/watch?v=2dZT9GShJ3A&t=190s’;

                       public youtubeId = ‘2dZT9GShJ3A&t=190s’;

                       public embedUrl = ‘https://www.youtube.com/embed/’

                       videoUrl: string;

                       constructor() {

                              this.videoUrl =  this.embedUrl + this.youtubeId;

                            }

                    }

• Copy below code in your app.component.html file which is available in your project directory to create the binding

             <iframe width=”250″ height=”150″ [src]=”videoUrl” allowfullscreen>

             </iframe>

• • Here we have used the src attribute enclosed by square brackets ex: [src] this represents one-way binding called property binding in angular. Property binding is used to bind values to the DOM properties of the HTML elements.

• • <allowfullscreen> used here to enable fullscreen mode in youtube player.

DOM Sanitizer

• DomSanitizer helps to prevent Cross-Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts
• When a value is inserted into a DOM from a template (via property, attribute, style, class binding, or interpolation), Angular treats all such values as untrusted by default. DOM Sanitizer comes as a rescue for us in such a situation.

Use of DOM Sanitizer

• The correct way to use DomSanitizer is by using a custom pipe and making sure we declare it as a pure pipe so Angular will cache our result and will not run it every time the change detection has fired.
• Follow the below steps to use DOM Sanitizer
  • Create PIPE using the below command on Angular CLI (this will generate a file in the directory)
    • ng generate pipe <pipe name> or ng g p <pipe name>

for example, ng generate  pipe safe-URL, your project structure will be like below

• • • Import DomSanitizer from @angular/platform-browser in your safe-url.pipe.ts
      • import { DomSanitizer } from @angular/platform-browser;
    • Pass DomSanitizer in constructor
      • constructor(private sanitizer :DomSanitizer)
    • In transform method of pipe use bypassSecurityTrustResourceUrl method of DomSanitizer
      • transform(url) {

                                                 return this.sanitizer.bypassSecurityTrustResourceUrl(url)

                                           }

• • • After following the above steps overall code in your safe-url.pipe.ts file should look like
      • import { Pipe, PipeTransform } from ‘@angular/core’

                                          import { DomSanitizer } from ‘@angular/platform-browser’

                                            @Pipe({

                                                   name: ‘safeUrl’

                                               })

                                        export class SafeUrlPipe implements PipeTransform {

                                        constructor(private sanitizer: DomSanitizer) {}

                                        transform(url) {

                                              return this.sanitizer.bypassSecurityTrustResourceUrl(url)

                                           }

                                  }

• • Update your app.component.html file with below code snippet

                       <iframe width=”250″ height=”150″ [src]=”videoUrl | safeUrl” frameborder=”0″ allowfullscreen> </iframe>