Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 4. Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!
To install ngx-embed-video library, run:
$ npm install ngx-embed-video --saveand then in your Angular AppModule:
import { HttpModule } from '@angular/http';
import { EmbedVideo } from 'ngx-embed-video';
@NgModule({
imports: [
HttpModule,
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(vimeoUrl));
console.log(this.embedService.embed(youtubeUrl));
console.log(this.embedService.embed(dailymotionUrl));
console.log(this.embedService.embed_vimeo(vimeoId));
console.log(this.embedService.embed_youtube(youtubeId));
console.log(this.embedService.embed_dailymotion(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);
)
}Return an HTML fragment embed code (string) for the given video URL.
Return an HTML fragment embed code (string) for the given vimeo video ID.
Return an HTML fragment embed code (string) for the given youtube video ID.
Return an HTML fragment embed code (string) for the given dailymotion video ID.
Returns an HTML <img> tag (string) for the given url and the link in a callback.
{
link: http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
html: <img src="http://img.youtube.com/vi/iHhcHTlGtRs/default.jpg"/>
}Object to be serialized as a querystring and appended to the embedded content url.
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>Object to add additional attributes (any) to the iframe
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>- default
- mqdefault
- hqdefault
- sddefault
- maxresdefault
this.embedService.embed_image('https://www.youtube.com/watch?v=iHhcHTlGtRs', { image: 'mqdefault' })- thumbnail_small
- thumbnail_medium
- thumbnail_large
this.embedService.embed_image('https://vimeo.com/197933516', { image: 'thumbnail_medium' })- 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' })MIT - SamirH