ngx-embed-video
v1.0.4
> 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!
0/weekUpdated 3 years agoMITUnpacked: 667.6 KB
Published by SamirHodzic
npm install ngx-embed-videongx-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!
[![npm-url][npm-url-svg]][npm-url]
[![npm-url][down-url-svg]][npm-url]
[![build-url][build-url-svg]][build-url]
[![Dependencies][dependencies]][dependencies-url]
Play with ngx-embed-video live on stackblitz.com/ngx-embed-video-example.
Installation
To install ngx-embed-video library, run:
``bash`
$ npm install ngx-embed-video --save
Consuming EmbedVideo library
and then in your Angular AppModule:
`typescript
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:
`typescript
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:
`html
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
>
frameborder="0"
allowfullscreen
>
frameborder="0"
allowfullscreen
>
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
>
frameborder="0"
allowfullscreen
>
frameborder="0"
allowfullscreen
>
`
Example usage with sanitized innerHtml iframe:
`typescript
import { Component } from '@angular/core';
import { EmbedVideoService } from 'ngx-embed-video';
@Component({
selector: 'app-component',
template: '
})
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
$3
Return an HTML fragment embed code (string) for the given video URL.
$3
Return an HTML fragment embed code (string) for the given _vimeo_ video ID.
$3
Return an HTML fragment embed code (string) for the given _youtube_ video ID.
$3
Return an HTML fragment embed code (string) for the given _dailymotion_ video ID.
$3
Returns an HTML tag (string) for the given url and the link in a callback.
`js`
{
link: //img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
http: html: 
;
}
Options
$3
Object to be serialized as a querystring and appended to the embedded content url.
#### Example
`typescript`
this.embedService.embed_vimeo('197933516', {
query: { portrait: 0, color: '333' }
});
Output:
`html`
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
>
$3
Object to add additional attributes (any) to the iframe
#### Example
`typescript`
this.embedService.embed('https://youtu.be/iHhcHTlGtRs', {
query: { portrait: 0, color: '333' },
attr: { width: 400, height: 200 }
});
Output:
`html`
frameborder="0"
allowfullscreen
width="400"
height="200"
>
#### Youtube Image options
- default
- mqdefault
- hqdefault
- sddefault
- maxresdefault
`typescript`
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
`typescript`
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
`typescript``
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
[build-url]: https://travis-ci.org/SamirHodzic/ngx-embed-video
[build-url-svg]: https://travis-ci.org/SamirHodzic/ngx-embed-video.svg?branch=master
[down-url-svg]: https://img.shields.io/npm/dt/ngx-embed-video.svg
[dependencies]: https://david-dm.org/samirhodzic/ngx-embed-video.svg
[dependencies-url]: https://david-dm.org/samirhodzic/ngx-embed-video
[npm-url-svg]: https://img.shields.io/npm/v/ngx-embed-video.svg
[npm-url]: https://www.npmjs.com/package/ngx-embed-video