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 --saveConsuming 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