Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samirhodzic/ngx-embed-video
Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+.
https://github.com/samirhodzic/ngx-embed-video
angular angular4 dailymotion embed-videos typescript video vimeo youtube
Last synced: 7 days ago
JSON representation
Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 6+.
- Host: GitHub
- URL: https://github.com/samirhodzic/ngx-embed-video
- Owner: SamirHodzic
- License: mit
- Created: 2017-03-17T20:16:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T20:59:47.000Z (almost 3 years ago)
- Last Synced: 2024-10-28T16:14:58.515Z (17 days ago)
- Topics: angular, angular4, dailymotion, embed-videos, typescript, video, vimeo, youtube
- Language: TypeScript
- Homepage:
- Size: 85.9 KB
- Stars: 56
- Watchers: 2
- Forks: 41
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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!
[![npm-url][npm-url-svg]][npm-url]
[![npm-url][down-url-svg]][npm-url]
[![npm-url][down-url-dw-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](https://stackblitz.com/edit/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
```
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
### 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 `![]()
` tag (string) for the given url and the `link` in a callback.
```js
{
link: //img.youtube.com/vi/iHhcHTlGtRs/default.jpg,
http: html: 
;
}
```
## Options
### query
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
```
### attributes
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
```
#### 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
[down-url-dw-svg]: https://img.shields.io/npm/dw/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