Angular and YouTube

Streaming YouTube Video in Angular Application – Devstringx

Table of Contents

[vc_row][vc_column][vc_column_text]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 go to launch the application on http://localhost:4200/ and your project directory will be going to look like [/vc_column_text][vc_single_image image=”2658″ img_size=”full”][vc_column_text]

After Setting Up the Angular Project Perform Below Steps:

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 the 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> is used here to enable fullscreen mode in the youtube player.

DOM Sanitizer

  • DomSanitizer helps 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 [/vc_column_text][vc_single_image image=”2659″ img_size=”full”][vc_column_text]

      • Import DomSanitizer from @angular/platform-browser in your safe-url.pipe.ts
        • import { DomSanitizer } from @angular/platform-browser;
      • Pass DomSanitizer in the constructor
        • constructor(private sanitizer :DomSanitizer)
      • In the transform method of pipe use the 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>

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Related Post:-

[/vc_column_text][/vc_column][/vc_row]

Related Blogs