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:

$ npm install ngx-embed-video --save

Consuming EmbedVideo library

and then in your Angular AppModule:

import { HttpClientModule } from '@angular/common/http';
import { EmbedVideo } from 'ngx-embed-video';

@NgModule({
  imports: [HttpClientModule, EmbedVideo.forRoot()]
})
export class AppModule {}

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

Example usage:

import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';

@Component({
  selector: 'app-component',
  templateUrl: './template.html'
})
export class AppComponent {
  vimeoUrl = 'https://vimeo.com/197933516';
  youtubeUrl = 'https://www.youtube.com/watch?v=iHhcHTlGtRs';
  dailymotionUrl =
    'https://www.dailymotion.com/video/x20qnej_red-bull-presents-wild-ride-bmx-mtb-dirt_sport';

  vimeoId = '197933516';
  youtubeId = 'iHhcHTlGtRs';
  dailymotionId = 'x20qnej';

  constructor(private embedService: EmbedVideoService) {
    console.log(this.embedService.embed(this.vimeoUrl));
    console.log(this.embedService.embed(this.youtubeUrl));
    console.log(this.embedService.embed(this.dailymotionUrl));

    console.log(this.embedService.embed_vimeo(this.vimeoId));
    console.log(this.embedService.embed_youtube(this.youtubeId));
    console.log(this.embedService.embed_dailymotion(this.dailymotionId));
  }
}

Example output:

<iframe
  src="https://player.vimeo.com/video/197933516"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen
></iframe>
<iframe
  src="https://www.youtube.com/embed/iHhcHTlGtRs"
  frameborder="0"
  allowfullscreen
></iframe>
<iframe
  src="https://www.dailymotion.com/embed/video/x20qnej"
  frameborder="0"
  allowfullscreen
></iframe>

<iframe
  src="https://player.vimeo.com/video/197933516"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen
></iframe>
<iframe
  src="https://www.youtube.com/embed/iHhcHTlGtRs"
  frameborder="0"
  allowfullscreen
></iframe>
<iframe
  src="https://www.dailymotion.com/embed/video/x20qnej"
  frameborder="0"
  allowfullscreen
></iframe>

Example usage with sanitized innerHtml iframe:

import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';

@Component({
  selector: 'app-component',
  template: '<div [innerHtml]="iframe_html"></div>',
})
export class AppComponent {
  iframe_html: any;
  youtubeUrl = "https://www.youtube.com/watch?v=iHhcHTlGtRs";

  constructor(
    private embedService: EmbedVideoService
  ) {
    this.iframe_html = this.embedService.embed(youtubeUrl);
  )
}

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.

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

Options

query

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

Example

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

Output:

<iframe
  src="https://player.vimeo.com/video/197933516?portrait=0&color=333"
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
  allowfullscreen
></iframe>

attributes

Object to add additional attributes (any) to the iframe

Example

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

Output:

<iframe
  src="https://www.youtube.com/embed/iHhcHTlGtRs?portrait=0&color=333"
  frameborder="0"
  allowfullscreen
  width="400"
  height="200"
></iframe>

Youtube Image options

• default
• mqdefault
• hqdefault
• sddefault
• maxresdefault

this.embedService
  .embed_image(
    'https://www.youtube.com/watch?v=iHhcHTlGtRs', 
    { image: 'mqdefault' }
  )
  .then(res => {
    this.thumbnail = res.html;
  });

Vimeo Image options

• thumbnail_small
• thumbnail_medium
• thumbnail_large

this.embedService
  .embed_image(
    'https://vimeo.com/197933516', 
    { image: 'thumbnail_medium' }
  )
  .then(res => {
    this.thumbnail = res.html;
  });

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

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

License

MIT