JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 63
  • Score
    100M100P100Q73283F
  • License Apache-2.0

Embed media from from top tier media providers directly in your Angular 6+ application

Package Exports

  • ngx-embedded-media

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-embedded-media) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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/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>