@hkvstore/ngx-embedded-media
v10.1.3
Published
Embed media from from top tier media providers directly in your Angular 6+ application
Downloads
14
Maintainers
Readme
ngx-embedded-media
Embed media from from top tier media providers directly in your Angular 6+ application. Currently supports YouTube, Vimeo, *Twitch (videos and clips) and Dailymotion.
Installation
To install ngx-embedded-media library, run:
$ npm install ngx-embedded-media --save
Importing the Library Module
import { EmbeddedMediaModule } from 'ngx-embedded-media';
@NgModule({
imports: [EmbeddedMediaModule.forRoot()]
})
export class AppModule {}
Usage
Embedding a video:
<embedded-media video='https://www.youtube.com/embed/3Wf29RiKp70'></embedded-media>
<!-- OR -->
<embedded-media video='3Wf29RiKp70' provider='youtube'></embedded-media>
Embedding video thumbnail:
<embedded-media image='https://vimeo.com/186450193'></embedded-media>
<!-- OR -->
<embedded-media image='186450193' provider='vimeo'></embedded-media>
Embedding playlist:
<embedded-media playlist='http://www.youtube.com/embed/videoseries?list=PLpRjkOHBe_TgmznCle__jWDhoV4aFgCjw'></embedded-media>
<!-- OR -->
<embedded-media platlist='PLpRjkOHBe_TgmznCle__jWDhoV4aFgCjw' provider='youtube'></embedded-media>
Available Optional Inputs
query
Object to be serialized as a query string and appended to the embedded content url. I.e:
<embedded-media video='https://www.youtube.com/embed/3Wf29RiKp70' query='{ "portrait": 0, "muted": true }'></embedded-media>
attributes
Object containing additional attributes to be added to the embedded iframe / image. I.e:
<embedded-media video='https://www.youtube.com/embed/3Wf29RiKp70' attributes='{ "width": 600, "height": 300 }'></embedded-media>
Provider
The service provider name.
- youtube
- vimeo
- twitch
- daily-motion
<embedded-media video='3Wf29RiKp70' provider='youtube'></embedded-media>
Resolution Options
Unique options that can be passed to the service provider to control the video / thumbnail appearance.
Youtube Image Resolution Options
- default
- mqdefault
- hqdefault
- sddefault
- maxresdefault
<embedded-media image='https://www.youtube.com/embed/3Wf29RiKp70' resolution='mqdefault'></embedded-media>
Vimeo Image Resolution Options
- thumbnail_small
- thumbnail_medium
- thumbnail_large
<embedded-media image='https://vimeo.com/186450193' resolution='thumbnail_medium'></embedded-media>
Dailymotion Image Resolution 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
<embedded-media image='https://www.dailymotion.com/video/x36btaw' resolution='thumbnail_1080_url'></embedded-media>