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 >
< embedded-media video = ' 3Wf29RiKp70 ' provider = ' youtube ' > < / embedded-media >
Embedding video thumbnail:
< embedded-media image = ' https://vimeo.com/186450193 ' > < / embedded-media >
< 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 >
< 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 >