Miss any of our Open RFC calls?Watch the recordings here! »

ngx-embedded-media

8.2.4 • Public • Published

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.

licence npm version Dependencies status

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/watch?v=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>

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/watch?v=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/watch?v=3Wf29RiKp70' attributes='{ "width": 600, "height": 300 }'></embedded-media>

Provider

The service provider name.

  • youtube
  • vimeo
  • 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/watch?v=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>

Install

npm i ngx-embedded-media

DownloadsWeekly Downloads

72

Version

8.2.4

License

Apache-2.0

Unpacked Size

45.9 kB

Total Files

23

Last publish

Collaborators

  • avatar