CODEWITHSUNDEEP
angular
Arun Purewal
Arun Purewal

Reputation: 457

How to Embed a YouTube video in Angular?

I was following this tutorial on YouTube, and it's basically a table with the music you like, but the tutorial ends.

It's using Angular2, and everything is working correctly however where the gentleman left it, it's just showing the constructor of the video in the console with this code:

*Playlist.Component.Ts:

export class PlaylistComponent{ 
onSelect(vid:Video) { 
console.log(JSON.stringify(vid)); } }

*Playlist.Component.html:

<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr *ngFor="#v of videos" (click)="onSelect(v)">
<td>{{ v.id }}</td>
<td>{{ v.title }}</td>
<td>{{ v.desc }}</td>
</tr>
</tbody>
</table>

*App.Component.Ts:

import {Component} from 'angular2/core';
import {Config} from './config.service';
import {Video} from './video';
import {PlaylistComponent} from './playlist.component';

@Component({
    selector: 'my-app',
    templateUrl: 'app/ts/app.component.html',
    directives: [PlaylistComponent]
})

export class AppComponent {
    mainHeading = Config.MAIN_HEADING;
    videos:Array<Video>;

    constructor() {

        this.videos = [
            new Video(1, "The 1975 - Somebody Else", "Bimd2nZirT4", "Calm."),
            new Video(2, "Killswitch Engage - Holy Diver", "NR7dG_m3MsI", "Hell Yeah!")
        ]


    }
}

*And finally the Video.ts:

export class Video {
    id: number;
    title: string;
    videoCode: string;
    desc: string;

    constructor(id: number, title: string, videoCode: string, desc: string){
          this.id = id;
          this.title = title;
          this.videoCode = videoCode;
          this.desc = desc;
    }
}

How would I get it to actually embed the YouTube video in the browser once you click on the table?

Upvotes: 30

Views: 72012

Answers (5)

i.karayel
i.karayel

Reputation: 4885

I had same problem after many changes nothing happened. Luckily I realized to disable adblocker after that embedded video played Successfully on my page. Make sure your adblocker disabled.

videoUrl = 'https://www.youtube.com/embed/your-videoId'
constructor(private authService: AuthService, private _sanitizer: DomSanitizer) {
    this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(this.videoUrl);
}

<iframe [src]='safeURL' width="560" height="315" frameborder="0" allowfullscreen></iframe>

Upvotes: 4

Derek Hill
Derek Hill

Reputation: 6454

There is now an Angular YouTube Player component

To understand the API you need to read the source. It has various inputs, outputs and functions. For example:

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

example-module.ts

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

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

Upvotes: 17

All Іѕ Vаиітy
All Іѕ Vаиітy

Reputation: 26482

YouTube videos are embedded as iframe. One embed code look like this,

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

To make the YouTube Video work with Angular 2+, you have to sanitize the URL first.

import DomSanitizer to use it. So pass the videoURL as https://www.youtube.com/watch?v=1ozGKlOzEVc.

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

Then add it to your constructor

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

Then bind the value safeUrl to iframe. 

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

Upvotes: 59

Barani r
Barani r

Reputation: 2367

Try this:

component.ts
------------
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
::
::
::
export class MyComponent implements OnInit {
public safeURL: SafeResourceUrl;
constructor(private _sanitizer: DomSanitizer) { 
this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/WovwuOFBUuY');
}
}

HTML:
----    
<tr>
<td>AliceMovie</td><td><iframe width="560" height="315" [src]='safeURL' frameborder="0" allowfullscreen></iframe><td>
<td>

Upvotes: 1

Igor Janković
Igor Janković

Reputation: 5532

I don't know where exactly do you want to embed video but you can put somewhere in your HTML:

<iframe width="420" height="315" [src]="'https://www.youtube.com/embed/' + v.videoCode"></iframe>

Upvotes: 2

Related Questions