ngx-embed-video

Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+. Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!

Play with ngx-embed-video live on stackblitz.com/ngx-embed-video-example.

Installation

To install ngx-embed-video library, run:

1$ npm install ngx-embed-video --save

Consuming EmbedVideo library

and then in your Angular AppModule:

1import { HttpClientModule } from '@angular/common/http';
2import { EmbedVideo } from 'ngx-embed-video';
3
4@NgModule({
5  imports: [HttpClientModule, EmbedVideo.forRoot()]
6})
7export class AppModule {}

Once your library is imported, you can use it in your Angular application.

Example usage:

1import { Component } from '@angular/core';
2import { EmbedVideoService } from 'ngx-embed-video';
3
4@Component({
5  selector: 'app-component',
6  templateUrl: './template.html'
7})
8export class AppComponent {
9  vimeoUrl = 'https://vimeo.com/197933516';
10  youtubeUrl = 'https://www.youtube.com/watch?v=iHhcHTlGtRs';
11  dailymotionUrl =
12    'https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport';
13
14  vimeoId = '197933516';
15  youtubeId = 'iHhcHTlGtRs';
16  dailymotionId = 'x20qnej';
17
18  constructor(private embedService: EmbedVideoService) {
19    console.log(this.embedService.embed(this.vimeoUrl));
20    console.log(this.embedService.embed(this.youtubeUrl));
21    console.log(this.embedService.embed(this.dailymotionUrl));
22
23    console.log(this.embedService.embed_vimeo(this.vimeoId));
24    console.log(this.embedService.embed_youtube(this.youtubeId));
25    console.log(this.embedService.embed_dailymotion(this.dailymotionId));
26  }
27}

Example output:

1<iframe
2  src="https://player.vimeo.com/video/197933516"
3  frameborder="0"
4  webkitallowfullscreen
5  mozallowfullscreen
6  allowfullscreen
7></iframe>
8<iframe
9  src="https://www.youtube.com/embed/iHhcHTlGtRs"
10  frameborder="0"
11  allowfullscreen
12></iframe>
13<iframe
14  src="https://www.dailymotion.com/embed/video/x20qnej"
15  frameborder="0"
16  allowfullscreen
17></iframe>
18
19<iframe
20  src="https://player.vimeo.com/video/197933516"
21  frameborder="0"
22  webkitallowfullscreen
23  mozallowfullscreen
24  allowfullscreen
25></iframe>
26<iframe
27  src="https://www.youtube.com/embed/iHhcHTlGtRs"
28  frameborder="0"
29  allowfullscreen
30></iframe>
31<iframe
32  src="https://www.dailymotion.com/embed/video/x20qnej"
33  frameborder="0"
34  allowfullscreen
35></iframe>

Example usage with sanitized innerHtml iframe:

1import { Component } from '@angular/core';
2import { EmbedVideoService } from 'ngx-embed-video';
3
4@Component({
5  selector: 'app-component',
6  template: '<div [innerHtml]="iframe_html"></div>',
7})
8export class AppComponent {
9  iframe_html: any;
10  youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";
11
12  constructor(
13    private embedService: EmbedVideoService
14  ) {
15    this.iframe_html = this.embedService.embed(youtubeUrl);
16  )
17}

Usage

embed(url, [options])

Return an HTML fragment embed code (string) for the given video URL.

embed_vimeo(id, [options])

Return an HTML fragment embed code (string) for the given vimeo video ID.

embed_youtube(id, [options])

Return an HTML fragment embed code (string) for the given youtube video ID.

embed_dailymotion(id, [options])

Return an HTML fragment embed code (string) for the given dailymotion video ID.

embed_image(url, [options])

Returns an HTML <img> tag (string) for the given url and the link in a callback.

1{
2  link: //img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
3  http: html: <img src="http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg" />;
4}

Options

query

Object to be serialized as a querystring and appended to the embedded content url.

Example

1this.embedService.embed_vimeo('197933516', {
2  query: { portrait: 0, color: '333' }
3});

Output:

1<iframe
2  src="https://player.vimeo.com/video/197933516?portrait=0&color=333"
3  frameborder="0"
4  webkitallowfullscreen
5  mozallowfullscreen
6  allowfullscreen
7></iframe>

attributes

Object to add additional attributes (any) to the iframe

Example

1this.embedService.embed('https://youtu.be/iHhcHTlGtRs', {
2  query: { portrait: 0, color: '333' },
3  attr: { width: 400, height: 200 }
4});

Output:

1<iframe
2  src="https://www.youtube.com/embed/iHhcHTlGtRs?portrait=0&color=333"
3  frameborder="0"
4  allowfullscreen
5  width="400"
6  height="200"
7></iframe>

Youtube Image options

• default
• mqdefault
• hqdefault
• sddefault
• maxresdefault

1this.embedService
2  .embed_image(
3    'https://www.youtube.com/watch?v=iHhcHTlGtRs', 
4    { image: 'mqdefault' }
5  )
6  .then(res => {
7    this.thumbnail = res.html;
8  });

Vimeo Image options

• thumbnail_small
• thumbnail_medium
• thumbnail_large

1this.embedService
2  .embed_image(
3    'https://vimeo.com/197933516', 
4    { image: 'thumbnail_medium' }
5  )
6  .then(res => {
7    this.thumbnail = res.html;
8  });

Dailymotion Image options

• thumbnail_60_url
• thumbnail_120_url
• thumbnail_180_url
• thumbnail_240_url
• thumbnail_360_url
• thumbnail_480_url
• thumbnail_720_url
• thumbnail_1080_url

1this.embedService
2  .embed_image(
3    'https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport',
4    { image: 'thumbnail_720_url' }
5  )
6  .then(res => {
7    this.thumbnail = res.html;
8  });

License

MIT